DeepSeek-V3-0324 : Un guide avec un projet de démonstration

Qu'est-ce que DeepSeek-V3-0324 ?

DeepSeek-V3-0324 s'appuie sur son prédécesseur, DeepSeek-V3avec des améliorations majeures au niveau du raisonnement, de la génération frontale et des capacités augmentées par les outils.

Si vous voulez mon avis, je pense qu'ils auraient pu faire beaucoup plus de vagues en nommant le nouveau modèle 3.5 au lieu de 0324, qui est difficile à mémoriser. À en juger par le nom, la nouvelle version ne laisse entrevoir qu'une amélioration progressive, mais les résultats des tests sont tout autres :

Source : DeepSeek

Les résultats présentés dans le diagramme à barres ci-dessus reflètent des améliorations substantielles en matière de raisonnement logique, de résolution de problèmes mathématiques et de génération de codes.

DeepSeek-V3-0324 montre des améliorations tangibles dans la génération de HTML/CSS/JS utilisables, en particulier pour des tâches telles que :

• Composants d'interface utilisateur basés sur Tailwind
• Jeux interactifs frontaux
• Code web exécutable

Le modèle modernisé est également doté de fonctions améliorées pour l'utilisation de l'outil, notamment :

• L'appel des fonctions est désormais plus précis grâce à la correction d'incohérences dans les versions antérieures de la V3.
• Amélioration de la réécriture multi-tours, de la traduction et de la qualité de l'écriture chinoise.

Tout comme DeepSeek-R1, V3-0324 :

• Open-source (poids disponibles sur Hugging Face)
• MIT-licensed (gratuit pour une utilisation commerciale)

Aperçu du projet : Générateur d'interface utilisateur alimenté par DeepSeek dans Streamlit

Pour mettre à l'épreuve les capacités frontales de DeepSeek-V3-0324, j'ai construit une petite démo utilisant Streamlit et Tailwind CSS. Le projet est un générateur de composants en langue naturelle vers l'interface utilisateur, et il fonctionne comme suit :

• Il s'agit d'une invite en langage naturel comme : "Un bouton rouge avec un texte Hello blanc
• Il l'envoie ensuite à DeepSeek-V3-0324 via l'API
• Il rend les composants suivants :
• Le composant HTML généré par Tailwind.
• Un aperçu en direct dans une iframe.

Étape 1 : Conditions préalables

Avant de commencer, nous devons nous assurer que les outils et bibliothèques suivants sont installés :

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

Vérifiez la version de Python, qui doit être au moins 3.8 ou plus. Ensuite, installez toutes les autres dépendances mentionnées ci-dessus.

Ensuite, nous devons configurer la clé API DeepSeek en tant que variable d'environnement à l'aide du terminal. Pour obtenir votre clé API :

1. Accédez à la plateforme API DeepSeek et créez un compte.
2. Cliquez sur le bouton Clés API sur le côté gauche

3. Cliquez sur le bouton Créer une nouvelle clé API et suivez les instructions à l'écran.

Si vous souhaitez en savoir plus sur l'utilisation de l'API, vous pouvez consulter ce tutoriel sur l'API de DeepSeek. DeepSeek API de DeepSeek est excellent.

Nous devons maintenant configurer la clé API DeepSeek en tant que variable d'environnement à l'aide du terminal :

export DEEPSEEK_API_KEY=”Your_API_Key”

Nous avons maintenant toutes les dépendances pour notre application, alors construisons le générateur d'interface utilisateur.

Étape 2 : Construire le générateur d'interface utilisateur

Nous commençons par créer un fichier frontend_generator.py, qui agit comme un wrapper backend pour générer du code de composant frontend en utilisant DeepSeek-V3-0324.

1. Importations

Nous commençons par mettre en place les importations pour nos dépendances.

import requests
import json
import os

Les bibliothèques requests, json et os sont importées pour gérer la communication HTTP, la sérialisation JSON et l'accès à la variable d'environnement pour la clé API.

2. Définition de la clé et de l'URL de l'API

Ensuite, nous configurons la clé et l'URL de l'API DeepSeek pour l'application.

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

Les variables API_KEY et API_URL (déjà définies auparavant) sont définies pour l'authentification et pointent vers le point de terminaison du chat DeepSeek. Les en-têtes de la requête spécifient le type de contenu et incluent le jeton Bearer pour l'autorisation.

3. Invite du système

Le site SYSTEM_PROMPT définit le comportement de l'assistant. Il guide le modèle pour générer un code HTML lisible et bien structuré à l'aide des classes CSS de Tailwind, en veillant à ce que les éléments soient visuellement attrayants et correctement centrés.

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. Construire la charge utile

Enfin, construisons la charge utile (les données structurées que nous enverrons à l'API DeepSeek pour demander une réponse).

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

La fonction get_component_code() prend une invite définie par l'utilisateur (par exemple : "Une carte bleue avec un texte blanc") et construit une charge utile adaptée au format de message compatible avec l'OpenAI de DeepSeek. La charge utile comprend

• Le nom du modèle, par exemple "deepseek-chat".
• Un historique des messages en deux parties, c'est-à-dire "système + utilisateur".
• Définir stream=False pour recevoir une réponse complète en une seule fois

La fonction envoie une requête POST à l'API DeepSeek à l'aide de la fonction requests.post(). Si la demande aboutit, il extrait le résultat du modèle du champ choices[0].message.content.

Remarque : 'deepseek-chat' utilise par défaut la dernière version de DeepSeek V3-0324 (il n'est pas nécessaire de spécifier le modèle exact).

Étape 3 : Construire l'interface utilisateur avec Streamlit

Maintenant que notre générateur de code frontal est prêt, construisons l'interface utilisateur Streamlit qui relie le tout.

1. Importations

Nous commençons par importer les dépendances de l'application. Streamlit construit l'interface utilisateur et gère les interactions avec l'utilisateur, tandis que html intègre en toute sécurité le contenu HTML dans une iframe.

import streamlit as st
from frontend_generator import get_component_code
import html

2. Aperçu des composants

Construisons la fonction de prévisualisation des composants de notre application, qui permet aux utilisateurs de prévisualiser leurs composants dans la fenêtre 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>
    """

La fonction get_component_code() est importée du fichier frontend_generator.py que nous avons créé précédemment. Il se connecte à l'API DeepSeek et génère un composant CSS Tailwind sur la base d'une demande de l'utilisateur.

Ensuite, la fonction create_component_preview() enveloppe le code HTML brut renvoyé par le modèle dans un document HTML complet, compatible avec Tailwind. Il applique un style de base au centre et contient le composant d'interface utilisateur à l'intérieur d'une mise en page réactive.

3. Streamlit UI

Maintenant que nous avons tous nos composants, nous devons les assembler avec notre application 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)}")

La fonction st.text_input() utilise un exemple pré-rempli comme "Un bouton rouge avec le texte Bonjour" pour guider l'utilisateur. Lorsque l'utilisateur clique sur le bouton "Générer", l'application effectue les opérations suivantes :

1. Appelle la fonction get_component_code(prompt) pour récupérer le code HTML généré.
2. Il affiche le code HTML brut à l'aide de st.code() et l'intègre dans une présentation complète à l'aide de la fonction create_component_preview().
3. Enfin, il intègre le résultat dans une iframe à l'aide de la fonction st.components.v1.html() pour un rendu en direct.

L'utilisation de srcdoc à l'intérieur de l'iframe permet au script et aux styles de Tailwind de se charger dans le cadre de prévisualisation isolé, ce qui résout les limites du rendu HTML brut dans Streamlit.

Cette configuration permet un flux transparent de l'invite à la visualisation où les utilisateurs peuvent décrire les composants de l'interface utilisateur en langage clair et voir immédiatement le code sous-jacent et le résultat rendu.

Étape 4 : Test de l'application Streamlit

Maintenant que tous les composants sont en place, lançons notre application Streamlit. Exécutons la commande suivante dans le terminal :

streamlit run streamlit_app.py

Nous pouvons décrire notre composant en quelques mots et cliquer sur Generate. DeepSeek V3-0324 produit alors un code HTML basé sur Tailwind, qui est ensuite affiché sous la forme d'un aperçu visuel en direct.

Conclusion

DeepSeek V3-0324 fait de réels progrès en matière de raisonnement pratique, d'exécution de code, de génération d'interface utilisateur et d'ingénierie d'aide multimodale. Grâce à sa nature open-source et à sa vitesse fulgurante, c'est une excellente option pour les développeurs qui travaillent sur des projets :

• Applications augmentées d'outils
• Assistants multi-tours
• Générateurs d'interface utilisateur
• Copilotes basés sur le raisonnement

Pour découvrir d'autres nouveaux outils et modèles d'IA, je vous recommande ces blogs :

• GPT-4o Génération d'images : Un guide avec 8 exemples pratiques
• L'API audio d'OpenAI : Un guide avec un projet de démonstration
• Gemini 2.5 Pro : Caractéristiques, Tests, Accès, Benchmarks