DeepSeek-V3-0324: डेमो प्रोजेक्ट के साथ मार्गदर्शिका

DeepSeek-V3-0324 क्या है?

DeepSeek-V3-0324 अपने पूर्ववर्ती DeepSeek-V3 पर आधारित है, और तर्क, फ्रंट-एंड जेनरेशन, तथा टूल-अग्मेंटेड क्षमताओं में बड़े सुधार लाता है।

यदि आप मुझसे पूछें, तो मेरा मानना है कि यदि वे नए मॉडल का नाम 0324 के बजाय 3.5 रखते, जो याद रखना कठिन है, तो वे और ज्यादा चर्चा बटोर सकते थे। नाम से लगता है कि यह केवल एक छोटा-सा अपडेट है, लेकिन बेंचमार्क कुछ और ही कहानी बताते हैं:

स्रोत: DeepSeek

ऊपर दिए गए बार चार्ट के परिणाम तार्किक तर्क, गणितीय समस्या-समाधान, और कोड जेनरेशन में बड़े सुधार दर्शाते हैं।

DeepSeek-V3-0324 उपयोगी HTML/CSS/JS जेनरेट करने में ठोस सुधार दिखाता है, खासकर निम्न कार्यों के लिए:

• Tailwind-आधारित UI कंपोनेंट
• इंटरैक्टिव गेम फ्रंट-एंड
• चलने योग्य वेब कोड

अपग्रेडेड मॉडल उन्नत टूल-यूज़ फीचर्स के साथ आता है, जिनमें शामिल हैं:

• फ़ंक्शन कॉलिंग अब पहले के V3 वर्ज़न में मौजूद असंगतियों को ठीक करने के परिणामस्वरूप अधिक सटीक है।
• मल्टी-टर्न री-राइटिंग, अनुवाद, और चीनी लेखन गुणवत्ता में सुधार।

DeepSeek-R1 की तरह ही, V3-0324:

• ओपन-सोर्स है (वेट्स Hugging Face पर उपलब्ध)
• MIT-लाइसेंस्ड है (वाणिज्यिक उपयोग के लिए निःशुल्क)

प्रोजेक्ट अवलोकन: Streamlit में DeepSeek-संचालित UI जेनरेटर

DeepSeek-V3-0324 की फ्रंटएंड क्षमताओं को परखने के लिए, मैंने Streamlit और Tailwind CSS से एक छोटा डेमो बनाया। यह प्रोजेक्ट नैचुरल-लैंग्वेज-टू-UI कंपोनेंट जेनरेटर है, और यह इस तरह काम करता है:

• यह नैचुरल लैंग्वेज प्रॉम्प्ट लेता है, जैसे: "सफेद Hello टेक्स्ट वाला लाल बटन"
• फिर इसे API के माध्यम से DeepSeek-V3-0324 को भेजता है
• यह निम्न कंपोनेंट्स रेंडर करता है:
• Tailwind द्वारा जेनरेट किया गया HTML कंपोनेंट।
• एक लाइव प्रीव्यू, iframe में।

चरण 1: पूर्वापेक्षाएँ

शुरू करने से पहले, सुनिश्चित करें कि निम्नलिखित टूल और लाइब्रेरीज़ इंस्टॉल हैं:

python3 --version  # Python 3.8+
pip install requests streamlitसंचालित द्वारा

Python वर्ज़न जांचें, जो कम से कम 3.8 या उससे अधिक होना चाहिए। फिर, ऊपर बताई गई अन्य सभी डिपेंडेंसीज़ इंस्टॉल करें।

अगला कदम, हमें टर्मिनल का उपयोग करके DeepSeek API कुंजी को एक एनवायरनमेंट वेरिएबल के रूप में सेट करना है। अपनी API कुंजी पाने के लिए:

1. DeepSeek API प्लेटफ़ॉर्म पर जाएँ और एक खाता बनाएँ।
2. बाएँ तरफ API keys टैब पर क्लिक करें

3. Create new API key बटन पर क्लिक करें और ऑन-स्क्रीन निर्देशों का पालन करें।

यदि आपको API के उपयोग के बारे में और सीखने की आवश्यकता है, तो DeepSeek API पर यह ट्यूटोरियल बेहतरीन है।

अब हमें टर्मिनल का उपयोग करके DeepSeek API कुंजी को एक एनवायरनमेंट वेरिएबल के रूप में सेट करना है:

export DEEPSEEK_API_KEY=”Your_API_Key”संचालित द्वारा

अब हमारे एप्लिकेशन के लिए सभी डिपेंडेंसीज़ तैयार हैं, तो चलिए UI जेनरेटर बनाते हैं।

चरण 2: UI जेनरेटर बनाना

हम frontend_generator.py फ़ाइल बनाकर शुरू करते हैं, जो DeepSeek-V3-0324 का उपयोग करके फ्रंटएंड कंपोनेंट कोड जेनरेट करने के लिए बैकएंड रैपर का काम करती है।

1. इम्पोर्ट्स

हम अपनी डिपेंडेंसीज़ के लिए इम्पोर्ट सेटअप करना शुरू करते हैं।

import requests
import json
import osसंचालित द्वारा

requests, json, और os लाइब्रेरीज़ क्रमशः HTTP संचार, JSON सीरियलाइज़ेशन, और API कुंजी के लिए एनवायरनमेंट वेरिएबल एक्सेस संभालने हेतु इम्पोर्ट की जाती हैं।

2. API कुंजी और URL सेट करना

इसके बाद, हम एप्लिकेशन के लिए DeepSeek API कुंजी और API URL सेट करते हैं।

API_KEY = os.getenv("DEEPSEEK_API_KEY")
API_URL = "https://api.deepseek.com/chat/completions"
headers = {
    "Content-Type": "application/json",
    "Authorization": f"Bearer {API_KEY}"
}संचालित द्वारा

API_KEY और API_URL वेरिएबल (पहले ही सेट) DeepSeek के चैट कंप्लीशन एंडपॉइंट के लिए प्रमाणीकरण और लक्ष्य निर्धारित करते हैं। रिक्वेस्ट हेडर कंटेंट टाइप निर्दिष्ट करते हैं और ऑथराइज़ेशन के लिए Bearer टोकन शामिल करते हैं।

3. सिस्टम प्रॉम्प्ट

SYSTEM_PROMPT सहायक के व्यवहार को परिभाषित करता है। यह मॉडल को Tailwind CSS क्लासेज़ का उपयोग करके पठनीय, सुव्यवस्थित HTML जेनरेट करने के लिए निर्देशित करता है, ताकि एलिमेंट दृश्य रूप से आकर्षक हों और ठीक से केंद्रित हों।

SYSTEM_PROMPT = """
Generate clean HTML with Tailwind CSS classes. Focus on:
1. Use appropriate Tailwind utility classes
2. Ensure text is centered
3. Use clear, visible colors
4. Make content readable
Example for "red button with white text":
<button class="bg-red-500 text-white px-4 py-2 rounded">Click me</button>
Prompt: "A gray box with the text "Hello World" centered inside"
Expected Output:
<div class="bg-gray-300 flex items-center justify-center p-6 rounded-lg">
    <p class="text-black text-xl">Hello World</p>
</div>
"""संचालित द्वारा

4. पेलोड बनाना

अंत में, पेलोड बनाते हैं (संरचित डेटा जिसे हम प्रतिक्रिया प्राप्त करने के लिए DeepSeek API को भेजेंगे)।

def get_component_code(user_prompt: str) -> str:
    payload = {
        "model": "deepseek-chat",
        "messages": [
            {"role": "system", "content": SYSTEM_PROMPT},
            {"role": "user", "content": user_prompt}
        ],
        "stream": False
    }
    response = requests.post(API_URL, headers=headers, data=json.dumps(payload))
    if response.status_code == 200:
        content = response.json()['choices'][0]['message']['content']
        # Remove markdown code block markers if present
        if "```"in content:
            content = content.split("```")[1].strip()
        return content.strip() or f"""
            <div class="bg-gray-300 flex items-center justify-center p-6 rounded-lg">
                <p class="text-black text-xl">{user_prompt}</p>
            </div>
        """
    else:
        raise Exception(f"DeepSeek API error {response.status_code}: {response.text}")संचालित द्वारा

get_component_code() फ़ंक्शन उपयोगकर्ता द्वारा दिया गया प्रॉम्प्ट लेता है (उदाहरण: “सफेद टेक्स्ट वाला नीला कार्ड”) और DeepSeek के OpenAI-कम्पैटिबल मैसेज फ़ॉर्मेट के अनुरूप पेलोड बनाता है। पेलोड में शामिल हैं:

• मॉडल का नाम, अर्थात् “deepseek-chat”
• दो-भाग का संदेश इतिहास, यानी “system + user”
• stream=False ताकि पूरी प्रतिक्रिया एक बार में मिले

यह फ़ंक्शन requests.post() का उपयोग करके DeepSeek API को POST रिक्वेस्ट भेजता है। यदि रिक्वेस्ट सफल होती है, तो यह choices[0].message.content फ़ील्ड से मॉडल का आउटपुट निकालता है।

नोट: ‘deepseek-chat’ डिफ़ॉल्ट रूप से नवीनतम DeepSeek V3-0324 वर्ज़न का उपयोग करता है (सटीक मॉडल बताने की आवश्यकता नहीं)।

चरण 3: Streamlit के साथ UI बनाना

अब जबकि हमारा फ्रंटएंड कोड जेनरेटर तैयार है, आइए Streamlit UI बनाते हैं जो सब कुछ जोड़ता है।

1. इम्पोर्ट्स

हम एप्लिकेशन की डिपेंडेंसीज़ इम्पोर्ट करके शुरू करते हैं। Streamlit UI बनाता है और यूज़र इंटरैक्शन संभालता है, जबकि html एक iframe में HTML कंटेंट को सुरक्षित रूप से एम्बेड करता है।

import streamlit as st
from frontend_generator import get_component_code
import htmlसंचालित द्वारा

2. कंपोनेंट प्रीव्यू

आइए अपने एप्लिकेशन की कंपोनेंट प्रीव्यू सुविधा बनाते हैं, जो उपयोगकर्ताओं को Streamlit विंडो में अपने कंपोनेंट्स का प्रीव्यू देखने देती है।

def create_component_preview(raw_code: str) -> str:
    clean_code = raw_code.strip()
    return f"""
    <!DOCTYPE html>
    <html>
    <head>
        <script src="https://cdn.tailwindcss.com"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            html, body {{
                
                
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                background-
            }}
            .preview-container {{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                
                box-sizing: border-box;
            }}
            .component-wrapper {{
                width: 100%;
                max-width: 300px;
                display: flex;
                justify-content: center;
                align-items: center;
            }}
        </style>
    </head>
    <body>
        <div class="preview-container">
            <div class="component-wrapper">
                {clean_code}
            </div>
        </div>
    </body>
    </html>
    """संचालित द्वारा

get_component_code() फ़ंक्शन को हमने पहले बनाई गई frontend_generator.py फ़ाइल से इम्पोर्ट किया है। यह DeepSeek API से जुड़ता है और उपयोगकर्ता प्रॉम्प्ट के आधार पर Tailwind CSS कंपोनेंट जेनरेट करता है।

फिर, create_component_preview() फ़ंक्शन मॉडल द्वारा लौटाए गए कच्चे HTML कोड को एक पूर्ण, Tailwind-सक्षम HTML दस्तावेज़ में रैप करता है। यह बेसिक स्टाइलिंग लगाकर UI कंपोनेंट को केंद्र में रखता है और उसे रेस्पॉन्सिव लेआउट में समाहित करता है।

3. Streamlit UI

अब जब हमारे पास सभी कंपोनेंट हैं, तो हमें उन्हें अपनी Streamlit एप्लिकेशन के साथ जोड़ना है। 

st.set_page_config(page_title="UI Generator", layout="centered")
st.markdown("## Generate UI Components with AI")
prompt = st.text_input("Describe your component", value="A red button with Hello text")
if st.button("⚡ Generate"):
    try:
        code = get_component_code(prompt)
        st.subheader("Generated Code")
        st.code(code, language="html")
        preview_html = create_component_preview(code)
        iframe_html = f'<iframe srcdoc="{html.escape(preview_html)}" width="100%" height="300" style="border:none;"></iframe>'  
        st.subheader("Live Preview")
        st.components.v1.html(iframe_html, height=320)
    except Exception as e:
        st.error(f"Error generating component: {str(e)}")संचालित द्वारा

st.text_input() फ़ंक्शन एक उदाहरण सहित प्री-फिल्ड इनपुट का उपयोग करता है, जैसे "A red button with Hello text" ताकि उपयोगकर्ता को दिशा-निर्देश मिलें। जब उपयोगकर्ता "Generate" बटन पर क्लिक करता है, तो ऐप यह करता है:

1. get_component_code(prompt) फ़ंक्शन को कॉल करके जेनरेटेड HTML प्राप्त करता है।
2. कच्चा HTML st.code() से दिखाता है और create_component_preview() फ़ंक्शन का उपयोग करके HTML को पूर्ण प्रीव्यू लेआउट में रैप करता है।
3. अंत में, लाइव रेंडरिंग के लिए परिणाम को st.components.v1.html() फ़ंक्शन का उपयोग कर iframe के अंदर एम्बेड करता है।

iframe के अंदर srcdoc का उपयोग Tailwind स्क्रिप्ट और स्टाइल्स को आइसोलेटेड प्रीव्यू फ्रेम के भीतर लोड होने देता है, जिससे Streamlit में कच्चे HTML रेंडरिंग की सीमाओं का समाधान होता है।

यह सेटअप एक सहज प्रॉम्प्ट-टू-प्रीव्यू फ्लो सक्षम करता है, जहाँ उपयोगकर्ता साधारण भाषा में UI कंपोनेंट का वर्णन कर सकते हैं और तुरंत आधारभूत कोड व रेंडर किए गए परिणाम दोनों देख सकते हैं।

चरण 4: Streamlit ऐप का परीक्षण

अब जब हमारे पास सभी कंपोनेंट मौजूद हैं, तो अपनी Streamlit एप्लिकेशन चलाते हैं। टर्मिनल में निम्न कमांड चलाएँ:

streamlit run streamlit_app.pyसंचालित द्वारा

हम अपने कंपोनेंट का वर्णन शब्दों में कर सकते हैं और Generate पर क्लिक कर सकते हैं। इससे DeepSeek V3-0324 Tailwind-आधारित HTML कोड तैयार करेगा, जिसे तत्पश्चात लाइव विजुअल प्रीव्यू के रूप में रेंडर किया जाएगा।

निष्कर्ष

DeepSeek V3-0324 व्यावहारिक तर्क, कोड निष्पादन, UI जेनरेशन, और मल्टी-मॉडल प्रॉम्प्ट इंजीनियरिंग में वास्तविक प्रगति दर्शाता है। अपने ओपन-सोर्स स्वभाव और तेज़ रफ़्तार के साथ, यह निम्न पर काम करने वाले डेवलपर्स के लिए उत्कृष्ट विकल्प है:

• टूल-अग्मेंटेड ऐप्स
• मल्टी-टर्न असिस्टेंट्स
• UI जेनरेटर
• रीज़निंग-आधारित कोपायलट्स

और नए AI टूल्स और मॉडल्स खोजने के लिए, मैं ये ब्लॉग सुझाता/सुझाती हूँ:

• GPT-4o इमेज जेनरेशन: 8 व्यावहारिक उदाहरणों के साथ गाइड
• OpenAI का Audio API: डेमो प्रोजेक्ट के साथ गाइड
• Gemini 2.5 Pro: फीचर्स, टेस्ट्स, एक्सेस, बेंचमार्क्स