DeepSeek-V3-0324: Een gids met demoproject

Leer hoe je DeepSeek V3-0324 gebruikt om een UI-componentgenerator te bouwen met Streamlit en Tailwind CSS.

Bijgewerkt 2 okt 2026 · 12 min lezen

Verken met AI

Wat is DeepSeek-V3-0324?

DeepSeek-V3-0324 bouwt voort op zijn voorganger, DeepSeek-V3, met grote verbeteringen in redeneren, front-endgeneratie en tool-augmented mogelijkheden.

Als je het mij vraagt, hadden ze veel meer aandacht kunnen trekken als ze het nieuwe model 3.5 hadden genoemd in plaats van 0324, wat lastig te onthouden is. Afgaande op de naam lijkt het slechts een kleine verbetering, maar de benchmarks vertellen een ander verhaal:

Bron: DeepSeek

De resultaten in de bovenstaande staafgrafiek laten substantiële verbeteringen zien in logisch redeneren, wiskundig probleemoplossen en codegeneratie.

DeepSeek-V3-0324 toont tastbare verbeteringen in het genereren van bruikbare HTML/CSS/JS, vooral voor taken als:

Tailwind-gebaseerde UI-componenten
Interactieve game-frontends
Uitvoerbare webcode

Het verbeterde model heeft ook uitgebreidere toolgebruikfuncties, waaronder:

Functieaanroepen zijn nu nauwkeuriger dankzij het oplossen van inconsistenties in eerdere V3-versies.
Betere multi-turn herschrijving, vertaling en Chinese schrijfkwaliteit.

Net als DeepSeek-R1 is V3-0324:

Open-source (gewichten beschikbaar op Hugging Face)
MIT-gelicentieerd (gratis voor commercieel gebruik)

Projectoverzicht: DeepSeek-aangedreven UI-generator in Streamlit

Om de frontendcapaciteiten van DeepSeek-V3-0324 te testen, heb ik een kleine demo gebouwd met Streamlit en Tailwind CSS. Het project is een generator van natuurlijke taal naar UI-component, en werkt als volgt:

Het neemt een prompt in natuurlijke taal zoals: "A red button with white Hello text"
Stuurt die vervolgens via de API naar DeepSeek-V3-0324
Rendert de volgende componenten:

De door Tailwind gegenereerde HTML-component.
Een live preview in een iframe.

Stap 1: Vereisten

Voordat we beginnen, zorgen we dat de volgende tools en bibliotheken zijn geïnstalleerd:

python3 --version  # Python 3.8+
pip install requests streamlit

Controleer de Python-versie; die moet minimaal 3.8 zijn. Installeer daarna alle andere bovengenoemde dependencies.

Vervolgens moeten we de DeepSeek API-sleutel instellen als een omgevingsvariabele via de terminal. Om je API-sleutel te krijgen:

Ga naar het DeepSeek API-platform en maak een account aan.
Klik op het tabblad API keys aan de linkerkant

Klik op de knop Create new API key en volg de instructies op het scherm.

Als je meer wilt leren over het gebruik van de API, is deze tutorial over de DeepSeek API erg goed.

We moeten nu de DeepSeek API-sleutel instellen als een omgevingsvariabele via de terminal:

export DEEPSEEK_API_KEY=”Your_API_Key”

We hebben nu alle dependencies voor onze applicatie, dus laten we de UI-generator bouwen.

Stap 2: De UI-generator bouwen

We beginnen met het maken van een frontend_generator.py-bestand, dat fungeert als backend-wrapper voor het genereren van frontendcomponentcode met DeepSeek-V3-0324.

1. Imports

We beginnen met het instellen van de imports voor onze dependencies.

import requests
import json
import os

De bibliotheken requests, json en os worden geïmporteerd om HTTP-communicatie, JSON-serialisatie en toegang tot omgevingsvariabelen voor de API-sleutel af te handelen.

2. De API-sleutel en URL instellen

Vervolgens stellen we de DeepSeek API-sleutel en API-URL in voor de applicatie.

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}"
}

De variabelen API_KEY en API_URL (al eerder ingesteld) worden gebruikt om te authenticeren en te verwijzen naar het DeepSeek chat completion-endpoint. De requestheaders specificeren het contenttype en bevatten het Bearer-token voor autorisatie.

3. Systemprompt

De SYSTEM_PROMPT definieert het gedrag van de assistent. Deze stuurt het model aan om leesbare, goed gestructureerde HTML te genereren met Tailwind CSS-klassen, zodat elementen er aantrekkelijk uitzien en goed gecentreerd zijn.

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. De payload bouwen

Tot slot bouwen we de payload (de gestructureerde data die we naar de DeepSeek API sturen om een antwoord aan te vragen).

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}")

De functie get_component_code() neemt een door de gebruiker gedefinieerde prompt (bijvoorbeeld: “A blue card with white text”) en bouwt een payload die geschikt is voor DeepSeeks OpenAI-compatibele berichtformaat. De payload bevat:

De modelnaam, oftewel “deepseek-chat”
Een tweedelige berichtgeschiedenis: “system + user”
stream=False instellen om in één keer een volledig antwoord te ontvangen

De functie stuurt een POST-request naar de DeepSeek API met behulp van de functie requests.post(). Als het verzoek slaagt, haalt deze de output van het model op uit het veld choices[0].message.content.

Opmerking: ‘deepseek-chat’ gebruikt standaard de laatste DeepSeek V3-0324-versie (je hoeft het exacte model niet te specificeren).

Stap 3: De UI bouwen met Streamlit

Nu onze frontendcodegenerator klaar is, bouwen we de Streamlit-UI die alles samenbrengt.

1. Imports

We importeren de dependencies van de applicatie. Streamlit bouwt de UI en handelt gebruikersinteracties af, terwijl html HTML-inhoud veilig in een iframe insluit.

import streamlit as st
from frontend_generator import get_component_code
import html

2. Componentpreview

Laten we de componentpreview bouwen, waarmee gebruikers hun componenten in het Streamlit-venster kunnen bekijken.

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>
    """

De functie get_component_code() wordt geïmporteerd uit het eerder gemaakte bestand frontend_generator.py. Deze maakt verbinding met de DeepSeek API en genereert op basis van een gebruikersprompt een Tailwind CSS-component.

Vervolgens wikkelt de functie create_component_preview() de ruwe HTML-code die door het model is teruggegeven, in een volledig HTML-document met Tailwind ingeschakeld. Hij past basisstyling toe om de UI-component te centreren en binnen een responsieve lay-out te plaatsen.

3. Streamlit-UI

Nu we alle componenten hebben, moeten we ze samenbrengen in onze Streamlit-applicatie.

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)}")

De functie st.text_input() gebruikt een vooraf ingevuld voorbeeld zoals "A red button with Hello text" om de gebruiker te helpen. Wanneer de gebruiker op de knop "Generate" klikt, doet de app het volgende:

Roept de functie get_component_code(prompt) aan om de gegenereerde HTML op te halen.
Toont de ruwe HTML met st.code() en wikkelt de HTML in een volledige previewlay-out met de functie create_component_preview().
Embedt het resultaat tenslotte in een iframe met de functie st.components.v1.html() voor live weergave.

Het gebruik van srcdoc in het iframe zorgt ervoor dat het Tailwind-script en de stijlen binnen het geïsoleerde previewframe laden, wat de beperkingen van ruwe HTML-weergave in Streamlit oplost.

Deze setup maakt een naadloze prompt-naar-previewflow mogelijk, waarbij gebruikers UI-componenten in gewone taal kunnen beschrijven en direct zowel de onderliggende code als het gerenderde resultaat zien.

Stap 4: De Streamlit-app testen

Nu we alle componenten hebben, starten we onze Streamlit-applicatie. Voer de volgende opdracht uit in de terminal:

streamlit run streamlit_app.py

We kunnen onze component in woorden beschrijven en op Generate klikken. Dit laat DeepSeek V3-0324 Tailwind-gebaseerde HTML-code produceren, die vervolgens als live visuele preview wordt gerenderd.

Conclusie

DeepSeek V3-0324 zet echte stappen vooruit in praktische redenering, code-uitvoering, UI-generatie en multimodale prompt engineering. Met het open-sourcekarakter en de bliksemsnelle snelheid is het een uitstekende optie voor ontwikkelaars die werken aan: