DeepSeek-V3-0324: Panduan dengan Proyek Demo

Apa Itu DeepSeek-V3-0324?

DeepSeek-V3-0324 dibangun di atas pendahulunya, DeepSeek-V3, dengan peningkatan besar pada penalaran, pembuatan front-end, dan kemampuan yang ditingkatkan dengan alat.

Kalau boleh berpendapat, mereka mungkin bisa menarik perhatian lebih besar jika menamai model baru ini 3.5 alih-alih 0324, yang sulit diingat. Melihat dari namanya, versi baru ini terkesan hanya peningkatan kecil, tetapi tolok ukurnya menceritakan hal berbeda:

Sumber: DeepSeek

Hasil pada bagan batang di atas mencerminkan peningkatan substansial dalam penalaran logis, pemecahan masalah matematika, dan pembuatan kode.

DeepSeek-V3-0324 menunjukkan peningkatan nyata dalam menghasilkan HTML/CSS/JS yang dapat digunakan, khususnya untuk tugas seperti:

• Komponen UI berbasis Tailwind
• Front-end gim interaktif
• Kode web yang dapat dieksekusi

Model yang ditingkatkan ini juga hadir dengan fitur penggunaan alat yang lebih baik, termasuk:

• Pemanggilan fungsi kini lebih akurat berkat perbaikan inkonsistensi pada versi V3 sebelumnya.
• Peningkatan penulisan ulang multi-giliran, penerjemahan, dan kualitas penulisan bahasa Tionghoa.

Sama seperti DeepSeek-R1, V3-0324 bersifat:

• Sumber terbuka (bobot tersedia di Hugging Face)
• Berlisensi MIT (gratis untuk penggunaan komersial)

Gambaran Proyek: Generator UI Bertenaga DeepSeek di Streamlit

Untuk menguji kemampuan frontend DeepSeek-V3-0324, saya membuat demo kecil menggunakan Streamlit dan Tailwind CSS. Proyek ini adalah generator komponen UI dari bahasa alami, dan cara kerjanya seperti ini:

• Menerima prompt bahasa alami seperti: "Sebuah tombol merah dengan teks Hello berwarna putih"
• Lalu mengirimkannya ke DeepSeek-V3-0324 melalui API
• Merender komponen berikut:
• Komponen HTML yang dihasilkan Tailwind.
• Pratinjau langsung dalam iframe.

Langkah 1: Prasyarat

Sebelum mulai, pastikan kita sudah memasang alat dan pustaka berikut:

python3 --version  # Python 3.8+
pip install requests streamlitDidukung oleh

Periksa versi Python, yang sebaiknya minimal 3.8 atau lebih. Lalu, pasang semua dependensi lain yang disebutkan di atas.

Selanjutnya, kita perlu menyiapkan kunci API DeepSeek sebagai variabel lingkungan menggunakan terminal. Untuk mendapatkan kunci API Anda:

1. Kunjungi platform API DeepSeek dan buat akun.
2. Klik tab API keys di sisi kiri

3. Klik tombol Create new API key dan ikuti instruksi di layar.

Jika Anda perlu mempelajari lebih lanjut tentang penggunaan API, tutorial ini tentang DeepSeek API sangat bagus.

Sekarang kita perlu menyiapkan kunci API DeepSeek sebagai variabel lingkungan menggunakan terminal:

export DEEPSEEK_API_KEY=”Your_API_Key”Didukung oleh

Kita sekarang memiliki semua dependensi untuk aplikasi kita, jadi mari bangun generator UI-nya.

Langkah 2: Membangun Generator UI

Kita mulai dengan membuat berkas frontend_generator.py, yang bertindak sebagai pembungkus backend untuk menghasilkan kode komponen frontend menggunakan DeepSeek-V3-0324.

1. Impor

Kita mulai dengan menyiapkan impor untuk dependensi kita.

import requests
import json
import osDidukung oleh

Pustaka requests, json, dan os diimpor untuk menangani komunikasi HTTP, serialisasi JSON, dan akses variabel lingkungan untuk kunci API.

2. Menetapkan kunci API dan URL

Selanjutnya, kita menyiapkan kunci API DeepSeek dan URL API untuk aplikasi.

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

Variabel API_KEY dan API_URL (yang sudah ditetapkan sebelumnya) disetel untuk melakukan autentikasi dan mengarah ke endpoint chat completion DeepSeek. Header permintaan menentukan tipe konten dan menyertakan token Bearer untuk otorisasi.

3. System prompt

SYSTEM_PROMPT mendefinisikan perilaku asisten. Ini membimbing model untuk menghasilkan HTML yang mudah dibaca dan terstruktur dengan baik menggunakan kelas Tailwind CSS, memastikan elemen terlihat menarik dan terpusat dengan benar.

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

4. Membangun payload

Terakhir, mari bangun payload (data terstruktur yang akan kita kirim ke API DeepSeek untuk meminta respons).

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

Fungsi get_component_code() menerima prompt yang ditentukan pengguna (misalnya: “Sebuah kartu biru dengan teks putih”) dan membangun payload yang sesuai dengan format pesan yang kompatibel dengan OpenAI milik DeepSeek. Payload tersebut mencakup:

• Nama model yaitu “deepseek-chat”
• Riwayat pesan dua bagian yaitu “system + user”
• Menyetel stream=False untuk menerima respons penuh sekaligus

Fungsi ini mengirim permintaan POST ke API DeepSeek menggunakan fungsi requests.post(). Jika permintaan berhasil, maka fungsi mengekstrak keluaran model dari bidang choices[0].message.content.

Catatan: ‘deepseek-chat’ secara bawaan menggunakan versi DeepSeek V3-0324 terbaru (tidak perlu menentukan model secara spesifik).

Langkah 3: Membangun UI dengan Streamlit

Sekarang generator kode frontend kita sudah siap, mari bangun UI Streamlit yang menyatukan semuanya.

1. Impor

Kita mulai dengan mengimpor dependensi aplikasi. Streamlit membangun UI dan menangani interaksi pengguna, sementara html menyematkan konten HTML secara aman dalam iframe.

import streamlit as st
from frontend_generator import get_component_code
import htmlDidukung oleh

2. Pratinjau komponen

Mari bangun fitur pratinjau komponen untuk aplikasi kita, yang memungkinkan pengguna mempratinjau komponen mereka di jendela 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>
    """Didukung oleh

Fungsi get_component_code() diimpor dari berkas frontend_generator.py yang kita buat sebelumnya. Fungsi ini terhubung ke API DeepSeek dan menghasilkan komponen Tailwind CSS berdasarkan prompt pengguna.

Selanjutnya, fungsi create_component_preview() membungkus kode HTML mentah yang dikembalikan model dalam dokumen HTML lengkap yang mendukung Tailwind. Fungsi ini menerapkan penataan dasar untuk memusatkan dan menampung komponen UI dalam tata letak responsif.

3. UI Streamlit

Sekarang semua komponen sudah ada, kita perlu menyusunnya bersama aplikasi 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)}")Didukung oleh

Fungsi st.text_input() menggunakan isian awal dengan contoh seperti "A red button with Hello text" untuk memandu pengguna. Saat pengguna mengeklik tombol "Generate", aplikasi melakukan hal berikut:

1. Memanggil fungsi get_component_code(prompt) untuk mengambil HTML yang dihasilkan.
2. Menampilkan HTML mentah menggunakan st.code() dan membungkus HTML dalam tata letak pratinjau lengkap menggunakan fungsi create_component_preview().
3. Terakhir, menyematkan hasil di dalam iframe menggunakan fungsi st.components.v1.html() untuk perenderan langsung.

Penggunaan srcdoc di dalam iframe memungkinkan skrip dan gaya Tailwind dimuat dalam bingkai pratinjau terisolasi, mengatasi keterbatasan perenderan HTML mentah di Streamlit.

Pengaturan ini memungkinkan alur prompt-ke-pratinjau yang mulus, di mana pengguna dapat mendeskripsikan komponen UI dalam bahasa sehari-hari dan langsung melihat kode dasarnya serta hasil rendernya.

Langkah 4: Menguji Aplikasi Streamlit

Sekarang semua komponen sudah siap, mari jalankan aplikasi Streamlit kita. Jalankan perintah berikut di terminal:

streamlit run streamlit_app.pyDidukung oleh

Kita dapat mendeskripsikan komponen dengan kata-kata dan mengeklik Generate. Ini akan meminta DeepSeek V3-0324 menghasilkan kode HTML berbasis Tailwind, yang kemudian dirender sebagai pratinjau visual langsung.

Kesimpulan

DeepSeek V3-0324 mengambil langkah nyata ke depan dalam penalaran praktis, eksekusi kode, pembuatan UI, dan rekayasa prompt multimodal. Dengan sifatnya yang sumber terbuka dan kecepatannya yang sangat tinggi, ini adalah pilihan yang sangat baik bagi pengembang yang mengerjakan:

• Aplikasi yang ditingkatkan dengan alat
• Asisten multi-giliran
• Generator UI
• Copilot berbasis penalaran

Untuk menjelajahi lebih banyak alat dan model AI baru, saya merekomendasikan blog berikut:

• Pembuatan Gambar GPT-4o: Panduan dengan 8 Contoh Praktis
• OpenAI Audio API: Panduan dengan Proyek Demo
• Gemini 2.5 Pro: Fitur, Pengujian, Akses, Tolok Ukur