Lernpfad
Developing AI Applications
0 Min.
KI-Anwendungen entwickeln
Lerne, wie man KI-Anwendungen mit der OpenAI API erstellt.
Was ist DeepSeek-V3-0324?
DeepSeek-V3-0324 baut auf seinem Vorgänger auf, DeepSeek-V3mit wichtigen Verbesserungen in den Bereichen Reasoning, Front-End-Generierung und Tool-erweiterte Funktionen.
Wenn du mich fragst, denke ich, dass sie viel größere Wellen hätten schlagen können, wenn sie das neue Modell 3,5 genannt hätten, anstatt 0324, was schwer zu merken ist. Der Name lässt vermuten, dass es sich bei der neuen Version nur um eine inkrementelle Verbesserung handelt, aber die Benchmarks erzählen eine andere Geschichte:
Quelle: DeepSeek
Die Ergebnisse im obigen Balkendiagramm zeigen deutliche Verbesserungen im logischen Denken, im Lösen von mathematischen Problemen und in der Codegenerierung.
DeepSeek-V3-0324 zeigt spürbare Verbesserungen bei der Generierung von brauchbarem HTML/CSS/JS, insbesondere bei Aufgaben wie:
- Tailwind-basierte UI-Komponenten
- Interaktive Spiele-Frontends
- Ausführbarer Webcode
Das aufgerüstete Modell verfügt außerdem über verbesserte Funktionen für den Einsatz von Werkzeugen, darunter:
- Der Funktionsaufruf ist jetzt genauer, da Unstimmigkeiten in früheren V3-Versionen behoben wurden.
- Bessere Qualität beim Umschreiben, Übersetzen und Schreiben auf Chinesisch in mehreren Runden.
Genau wie DeepSeek-R1, ist V3-0324:
- Open-Source (Gewichte verfügbar auf Hugging Face)
- MIT-lizenziert (frei für kommerzielle Nutzung)
Projektübersicht: DeepSeek-gesteuerter UI-Generator in Streamlit
Um die Fähigkeiten von DeepSeek-V3-0324 im Frontend zu testen, habe ich eine kleine Demo mit Streamlit und Tailwind CSS erstellt. Das Projekt ist ein Generator für Komponenten in natürlicher Sprache für die Benutzeroberfläche und funktioniert folgendermaßen:
- Es braucht eine natürlichsprachliche Eingabeaufforderung wie: "Ein roter Button mit weißem Hello-Text"
- Dann sendet er sie über die API an DeepSeek-V3-0324
- Sie stellt die folgenden Komponenten dar:
- Die von Tailwind erzeugte HTML-Komponente.
- Eine Live-Vorschau in einem Iframe.
Schritt 1: Voraussetzungen
Bevor wir beginnen, müssen wir sicherstellen, dass wir die folgenden Tools und Bibliotheken installiert haben:
python3 --version # Python 3.8+
pip install requests streamlitÜberprüfe die Python-Version, die mindestens 3.8 oder höher sein sollte. Installiere dann alle anderen oben genannten Abhängigkeiten.
Als Nächstes müssen wir den DeepSeek-API-Schlüssel als Umgebungsvariable über das Terminal einrichten. Um deinen API-Schlüssel zu erhalten:
- Gehe zur DeepSeek API-Plattform und erstelle ein Konto.
- Klicken Sie auf die API-Schlüssel Registerkarte auf der linken Seite
- Klicken Sie auf die Schaltfläche Neuen API-Schlüssel erstellen und befolge die Anweisungen auf dem Bildschirm.
Wenn du mehr über die Nutzung der API erfahren möchtest, findest du in diesem Tutorial zur DeepSeek-API ist großartig.
Jetzt müssen wir den DeepSeek-API-Schlüssel als eine Umgebungsvariable über das Terminal einrichten:
export DEEPSEEK_API_KEY=”Your_API_Key”Wir haben jetzt alle Abhängigkeiten für unsere Anwendung, also lass uns den UI-Generator bauen.
Schritt 2: Den UI Generator bauen
Wir beginnen mit der Erstellung einer frontend_generator.py Datei, die als Backend-Wrapper für die Generierung von Frontend-Komponentencode mit DeepSeek-V3-0324 dient.
1. Importe
Wir beginnen damit, die Importe für unsere Abhängigkeiten einzurichten.
import requests
import json
import osDie Bibliotheken requests, json und os werden importiert, um die HTTP-Kommunikation, die JSON-Serialisierung und den Zugriff auf Umgebungsvariablen für den API-Schlüssel zu verwalten.
2. Einstellen des API-Schlüssels und der URL
Als Nächstes richten wir den DeepSeek-API-Schlüssel und die API-URL für die Anwendung ein.
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}"
}Die Variablen API_KEY und API_URL (die bereits vorher gesetzt wurden) sind auf Authentifizierung eingestellt und verweisen auf den DeepSeek-Chatabschluss-Endpunkt. Die Header der Anfrage geben den Inhaltstyp an und enthalten das Bearer-Token für die Autorisierung.
3. System-Eingabeaufforderung
Die SYSTEM_PROMPT definiert das Verhalten des Assistenten. Es leitet das Modell an, lesbaren, gut strukturierten HTML-Code mit Tailwind-CSS-Klassen zu erzeugen und sicherzustellen, dass die Elemente optisch ansprechend und richtig zentriert sind.
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. Bau der Nutzlast
Zum Schluss erstellen wir den Payload (die strukturierten Daten, die wir an die DeepSeek-API senden, um eine Antwort anzufordern).
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}")Die Funktion get_component_code() nimmt eine benutzerdefinierte Eingabeaufforderung (z. B.: "Eine blaue Karte mit weißem Text") und erstellt eine Nutzlast, die für das OpenAI-kompatible Nachrichtenformat von DeepSeek geeignet ist. Die Nutzlast umfasst:
- Der Modellname, z.B. "deepseek-chat".
- Ein zweiteiliger Nachrichtenverlauf, d.h. "System + Benutzer"
stream=Falseeinstellen, um eine vollständige Antwort in einem Zug zu erhalten
Die Funktion sendet eine POST Anfrage an die DeepSeek API mit der Funktion requests.post(). Wenn die Anfrage erfolgreich ist, wird der Output des Modells aus dem Feld choices[0].message.content extrahiert.
Hinweis: 'deepseek-chat' verwendet standardmäßig die neueste DeepSeek V3-0324 Version (du musst das genaue Modell nicht angeben).
Schritt 3: Erstellen der Benutzeroberfläche mit Streamlit
Jetzt, da unser Frontend-Codegenerator fertig ist, können wir die Streamlit-Oberfläche erstellen, die alles miteinander verbindet.
1. Importe
Wir beginnen damit, die Abhängigkeiten der Anwendung zu importieren. Streamlit baut die Benutzeroberfläche auf und kümmert sich um die Benutzerinteraktionen, während html den HTML-Inhalt sicher in einen iframe einbettet.
import streamlit as st
from frontend_generator import get_component_code
import html2. Komponentenvorschau
Lass uns die Komponentenvorschau für unsere Anwendung erstellen, mit der die Benutzer ihre Komponenten im Streamlit-Fenster in der Vorschau anzeigen können.
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>
"""Die Funktion get_component_code() wird aus der Datei frontend_generator.py importiert, die wir zuvor erstellt haben. Sie verbindet sich mit der DeepSeek-API und generiert eine Tailwind-CSS-Komponente auf der Grundlage einer Benutzerabfrage.
Dann verpackt die Funktion create_component_preview() den rohen HTML-Code, den das Modell zurückgibt, in ein vollständiges, Tailwind-fähiges HTML-Dokument. Es wendet ein grundlegendes Styling auf die Mitte an und enthält die UI-Komponente in einem responsiven Layout.
3. Streamlit UI
Jetzt, wo wir alle unsere Komponenten haben, müssen wir sie mit unserer Streamlit-Anwendung zusammenfügen.
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)}")Die Funktion st.text_input() verwendet ein vorausgefülltes Beispiel wie "Ein roter Button mit Hallo-Text", um den Benutzer zu führen. Wenn der Nutzer auf die Schaltfläche "Erzeugen" klickt, macht die App Folgendes:
- Ruft die Funktion
get_component_code(prompt)auf, um das generierte HTML zu holen. - Sie zeigt das rohe HTML mit st.code() an und wickelt das HTML mit der Funktion
create_component_preview()in ein vollständiges Vorschaulayout ein. - Zum Schluss wird das Ergebnis mit der Funktion
st.components.v1.html()in einen Iframe eingebettet, um es live zu rendern.
Die Verwendung von srcdoc innerhalb des iframe ermöglicht es, dass das Tailwind-Skript und die Stile innerhalb des isolierten Vorschaufensters geladen werden, wodurch die Einschränkungen des rohen HTML-Renderings innerhalb von Streamlit gelöst werden.
Dieses Setup ermöglicht einen nahtlosen Prompt-to-Preview-Flow, bei dem die Nutzer UI-Komponenten in einfacher Sprache beschreiben können und sofort sowohl den zugrunde liegenden Code als auch das gerenderte Ergebnis sehen.
Schritt 4: Testen der Streamlit App
Jetzt, wo alle Komponenten vorhanden sind, können wir unsere Streamlit-Anwendung starten. Lass uns den folgenden Befehl im Terminal ausführen:
streamlit run streamlit_app.py
Wir können unsere Komponente in Worten beschreiben und auf klicken . Dadurch wird DeepSeek V3-0324 veranlasst, Tailwind-basierten HTML-Code zu erzeugen, der dann als visuelle Live-Vorschau angezeigt wird.
Fazit
DeepSeek V3-0324 ist ein echter Schritt nach vorn in Sachen praktisches Reasoning, Code-Ausführung, UI-Generierung und multimodales Prompt Engineering. Mit seinem Open-Source-Charakter und seiner rasanten Geschwindigkeit ist es eine hervorragende Option für Entwickler, die an einem Projekt arbeiten:
- Tool-augmented Apps
- Multi-Turn-Assistenten
- UI-Generatoren
- Vernunftbasierte Kopiloten
Um weitere neue KI-Tools und -Modelle zu entdecken, empfehle ich diese Blogs:
