DeepSeek-V3-0324: Demo Projesiyle Rehber

DeepSeek-V3-0324 Nedir?

DeepSeek-V3-0324, selefi DeepSeek-V3 üzerine inşa edilmiştir ve akıl yürütme, ön yüz üretimi ve araçla zenginleştirilmiş yetenekler genelinde büyük iyileştirmeler sunar.

Bana sorarsanız, yeni modele 0324 yerine hatırlaması zor olmayan 3.5 adını verselerdi daha fazla ses getirebilirlerdi. İsim yalnızca küçük bir artırım gibi görünse de ölçüt sonuçları farklı bir hikâye anlatıyor:

Kaynak: DeepSeek

Yukarıdaki çubuk grafikteki sonuçlar, mantıksal akıl yürütme, matematik problemlerini çözme ve kod üretiminde kayda değer gelişmeleri yansıtıyor.

DeepSeek-V3-0324, özellikle şu görevlerde kullanılabilir HTML/CSS/JS üretiminde somut iyileştirmeler gösteriyor:

• Tailwind tabanlı UI bileşenleri
• Etkileşimli oyun ön yüzleri
• Çalıştırılabilir web kodu

Yükseltilmiş model, şu geliştirmeleri de içeren gelişmiş araç kullanımı özellikleriyle geliyor:

• Önceki V3 sürümlerindeki tutarsızlıkların giderilmesi sonucunda fonksiyon çağırma artık daha isabetli.
• Çok turlu yeniden yazma, çeviri ve Çince yazım kalitesi daha iyi.

DeepSeek-R1’da olduğu gibi, V3-0324 de:

• Açık kaynaklıdır (ağırlıklar Hugging Face üzerinde mevcut)
• MIT lisanslıdır (ticari kullanım için ücretsiz)

Proje Genel Bakışı: Streamlit ile DeepSeek Destekli UI Oluşturucu

DeepSeek-V3-0324’ün frontend yeteneklerini test etmek için, Streamlit ve Tailwind CSS ile çalışan küçük bir demo oluşturdum. Proje, doğal dilden UI bileşenine dönüştürücü bir oluşturucudur ve şu şekilde çalışır:

• Şu tür bir doğal dil girdisi alır: "Beyaz Hello metni olan kırmızı bir düğme"
• Ardından bunu API üzerinden DeepSeek-V3-0324’e gönderir
• Şu bileşenleri oluşturur:
• Tailwind ile üretilmiş HTML bileşeni.
• Bir iframe içinde canlı önizleme.

Adım 1: Önkoşullar

Başlamadan önce aşağıdaki araç ve kütüphanelerin kurulu olduğundan emin olalım:

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

Python sürümünüzü kontrol edin; en az 3.8 veya üzeri olmalı. Ardından yukarıda belirtilen diğer bağımlılıkları yükleyin.

Sonraki adımda, terminali kullanarak DeepSeek API anahtarını bir ortam değişkeni olarak ayarlamamız gerekiyor. API anahtarınızı almak için:

1. DeepSeek API platformuna gidin ve bir hesap oluşturun.
2. Sol taraftaki API keys sekmesine tıklayın

3. Create new API key düğmesine tıklayın ve ekrandaki yönergeleri izleyin.

API’yi kullanma hakkında daha fazla bilgiye ihtiyacınız varsa, DeepSeek API ile ilgili bu öğretici çok iyi.

Şimdi, terminal üzerinden DeepSeek API anahtarını bir ortam değişkeni olarak ayarlamamız gerekiyor:

export DEEPSEEK_API_KEY=”Your_API_Key”

Artık uygulamamız için tüm bağımlılıklara sahibiz; öyleyse UI oluşturucuyu inşa edelim.

Adım 2: UI Oluşturucuyu Geliştirme

Önce, DeepSeek-V3-0324 kullanarak frontend bileşen kodu üretimi için arka uç sarmalayıcı görevi gören bir frontend_generator.py dosyası oluşturuyoruz.

1. İçe aktarmalar

Bağımlılıklarımız için içe aktarmaları ayarlayarak başlıyoruz.

import requests
import json
import os

requests, json ve os kütüphaneleri; HTTP iletişimi, JSON serileştirme ve API anahtarı için ortam değişkeni erişimini yönetmek amacıyla içe aktarılır.

2. API anahtarını ve URL’yi ayarlama

Sırada, uygulama için DeepSeek API anahtarını ve API URL’sini ayarlamak var.

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 ve API_URL değişkenleri (daha önce ayarlandı) kimlik doğrulaması yapmak ve DeepSeek sohbet tamamlama uç noktasına işaret etmek için kullanılır. İstek üstbilgileri içerik türünü belirtir ve yetkilendirme için Bearer jetonunu içerir.

3. Sistem istemi

SYSTEM_PROMPT, asistanın davranışını tanımlar. Modeli, Tailwind CSS sınıflarını kullanarak okunabilir ve iyi yapılandırılmış HTML üretmesi için yönlendirir; böylece öğeler görsel olarak çekici olur ve düzgün ortalanır.

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. Yük oluşturma

Son olarak, DeepSeek API’sine yanıt istemek için göndereceğimiz yapısal veriyi (payload) oluşturalım.

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() fonksiyonu, kullanıcı tanımlı bir istemi (örneğin: “Beyaz metinli mavi bir kart”) alır ve DeepSeek’in OpenAI uyumlu mesaj formatına uygun bir payload oluşturur. Payload şunları içerir:

• Model adı, yani “deepseek-chat”
• İki parçalı mesaj geçmişi, yani “system + user”
• stream=False ayarıyla yanıtın tek seferde tam olarak alınması

requests.post() fonksiyonu kullanılarak DeepSeek API’sine bir POST isteği gönderilir. İstek başarılı olursa, model çıktısı choices[0].message.content alanından çıkarılır.

Not: Varsayılan olarak ‘deepseek-chat’, en güncel DeepSeek V3-0324 sürümünü kullanır (tam modeli belirtmeye gerek yoktur).

Adım 3: Streamlit ile UI Oluşturma

Artık frontend kod oluşturucumuz hazır olduğuna göre, her şeyi bir araya getiren Streamlit UI’ını oluşturalım.

1. İçe aktarmalar

Uygulamanın bağımlılıklarını içe aktararak başlıyoruz. Streamlit arayüzü kurar ve kullanıcı etkileşimlerini yönetir; html ise HTML içeriğini güvenli şekilde bir iframe içinde gömer.

import streamlit as st
from frontend_generator import get_component_code
import html

2. Bileşen önizlemesi

Uygulamamızın, kullanıcıların bileşenlerini Streamlit penceresinde önizlemesine olanak tanıyan bileşen önizleme özelliğini oluşturalım.

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() fonksiyonu, daha önce oluşturduğumuz frontend_generator.py dosyasından içe aktarılır. DeepSeek API’ye bağlanır ve kullanıcı istemine göre bir Tailwind CSS bileşeni üretir.

Ardından, create_component_preview() fonksiyonu, model tarafından döndürülen ham HTML kodunu eksiksiz, Tailwind etkin bir HTML belgesine sarar. Temel stilleri uygulayarak bileşeni ortalar ve duyarlı bir düzen içinde sunar.

3. Streamlit arayüzü

Artık tüm bileşenlere sahip olduğumuza göre, bunları Streamlit uygulamamızla bir araya getirmemiz gerekiyor. 

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() işlevi, kullanıcıya yol göstermek için "A red button with Hello text" gibi bir örnekle önceden doldurulmuş bir alan kullanır. Kullanıcı "Generate" düğmesine tıkladığında, uygulama şunları yapar:

1. Oluşturulan HTML’i almak için get_component_code(prompt) işlevini çağırır.
2. Ham HTML’i st.code() ile gösterir ve HTML’i tam bir önizleme yerleşimine create_component_preview() işleviyle sarar.
3. Son olarak, canlı oluşturma için sonucu st.components.v1.html() işlevini kullanarak bir iframe içine gömer.

Iframe içinde srcdoc kullanımı, Tailwind betiği ve stillerinin izole önizleme çerçevesi içinde yüklenmesini sağlar; bu da Streamlit içinde ham HTML işlenmesinin kısıtlarını aşar.

Bu kurulum, kullanıcıların UI bileşenlerini yalın dille tarif edip anında hem alttaki kodu hem de işlenmiş sonucu görmesine olanak tanıyan kesintisiz bir istemden önizlemeye akışı sağlar.

Adım 4: Streamlit Uygulamasını Test Etme

Artık tüm bileşenler hazır; şimdi Streamlit uygulamamızı çalıştıralım. Terminalde aşağıdaki komutu çalıştıralım:

streamlit run streamlit_app.py

Bileşenimizi kelimelerle tanımlayıp Generate’a tıklayabiliriz. Bu, DeepSeek V3-0324’ün Tailwind tabanlı HTML kodu üretmesini tetikler; ardından bu kod canlı bir görsel önizleme olarak işlenir.

Sonuç

DeepSeek V3-0324; pratik akıl yürütme, kod yürütme, UI oluşturma ve çok modlu istem tasarımında gerçek ilerlemeler sağlıyor. Açık kaynaklı yapısı ve son derece hızlı olmasıyla aşağıdaki alanlarda çalışan geliştiriciler için harika bir seçenek:

• Araçla zenginleştirilmiş uygulamalar
• Çok turlu asistanlar
• UI oluşturucular
• Akıl yürütme tabanlı yardımcılar

Daha fazla yeni yapay zekâ aracı ve modeli keşfetmek için şu blogları öneririm:

• GPT-4o Görüntü Üretimi: 8 Pratik Örnekle Rehber
• OpenAI'nin Ses API’si: Demo Projesiyle Rehber
• Gemini 2.5 Pro: Özellikler, Testler, Erişim, Ölçütler