DeepSeek-V3-0324: Hướng dẫn kèm dự án demo

DeepSeek-V3-0324 là gì?

DeepSeek-V3-0324 phát triển từ phiên bản tiền nhiệm DeepSeek-V3, với những cải tiến lớn về suy luận, sinh front-end và khả năng tăng cường công cụ.

Nếu hỏi tôi, tôi nghĩ họ đã có thể tạo hiệu ứng lớn hơn nếu đặt tên mô hình mới là 3.5 thay vì 0324, vốn khó nhớ. Dựa theo tên gọi, phiên bản mới nghe như chỉ cải thiện gia tăng, nhưng các bảng điểm chuẩn lại kể câu chuyện khác:

Nguồn: DeepSeek

Kết quả trong biểu đồ cột trên phản ánh những cải thiện đáng kể về suy luận logic, giải toán và sinh mã.

DeepSeek-V3-0324 cho thấy tiến bộ rõ rệt trong việc tạo HTML/CSS/JS có thể dùng ngay, đặc biệt cho các tác vụ như:

• Thành phần UI dựa trên Tailwind
• Frontend trò chơi tương tác
• Mã web có thể thực thi

Mô hình nâng cấp còn đi kèm các tính năng dùng công cụ được cải thiện, bao gồm:

• Gọi hàm chính xác hơn nhờ khắc phục các bất nhất ở những phiên bản V3 trước.
• Cải thiện viết lại đa lượt, dịch thuật và chất lượng viết tiếng Trung.

Giống như DeepSeek-R1, V3-0324:

• Mã nguồn mở (trọng số có trên Hugging Face)
• Giấy phép MIT (miễn phí cho mục đích thương mại)

Tổng quan dự án: Trình tạo UI dùng DeepSeek trong Streamlit

Để kiểm thử khả năng frontend của DeepSeek-V3-0324, tôi đã xây dựng một demo nhỏ dùng Streamlit và Tailwind CSS. Dự án là trình chuyển đổi ngôn ngữ tự nhiên thành thành phần UI, hoạt động như sau:

• Nhận một prompt ngôn ngữ tự nhiên như: "A red button with white Hello text"
• Gửi prompt đó đến DeepSeek-V3-0324 qua API
• Kết xuất các thành phần sau:
• Thành phần HTML sinh bởi Tailwind.
• Bản xem trước trực tiếp trong iframe.

Bước 1: Điều kiện tiên quyết

Trước khi bắt đầu, hãy đảm bảo chúng ta đã cài đặt các công cụ và thư viện sau:

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

Kiểm tra phiên bản Python, nên từ 3.8 trở lên. Sau đó cài đặt các phụ thuộc còn lại như trên.

Tiếp theo, chúng ta cần thiết lập khóa API DeepSeek dưới dạng biến môi trường bằng terminal. Để lấy khóa API của bạn:

1. Truy cập nền tảng API DeepSeek và tạo tài khoản.
2. Nhấp vào thẻ API keys ở bên trái

3. Nhấp nút Create new API key và làm theo hướng dẫn trên màn hình.

Nếu bạn cần tìm hiểu thêm về cách dùng API, hướng dẫn về DeepSeek API này rất hữu ích.

Giờ chúng ta cần thiết lập khóa API DeepSeek thành biến môi trường bằng terminal:

export DEEPSEEK_API_KEY=”Your_API_Key”

Chúng ta đã có đủ phụ thuộc cho ứng dụng, hãy bắt tay xây dựng trình tạo UI.

Bước 2: Xây dựng trình tạo UI

Bắt đầu bằng cách tạo tệp frontend_generator.py, đóng vai trò như lớp bao backend để sinh mã thành phần frontend bằng DeepSeek-V3-0324.

1. Import

Trước tiên, thiết lập import cho các phụ thuộc.

import requests
import json
import os

Các thư viện requests, json và os được import để xử lý giao tiếp HTTP, tuần tự hóa JSON và truy cập biến môi trường cho khóa API.

2. Thiết lập khóa API và URL

Tiếp theo, thiết lập khóa API DeepSeek và URL API cho ứng dụng.

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

Các biến API_KEY và API_URL (đã thiết lập trước đó) dùng để xác thực và trỏ tới endpoint chat completion của DeepSeek. Header yêu cầu chỉ định loại nội dung và bao gồm token Bearer để ủy quyền.

3. System prompt

SYSTEM_PROMPT xác định hành vi của trợ lý. Nó hướng dẫn mô hình tạo HTML dễ đọc, có cấu trúc tốt với các lớp Tailwind CSS, đảm bảo phần tử bắt mắt và căn giữa hợp lý.

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. Xây dựng payload

Cuối cùng, hãy xây dựng payload (dữ liệu có cấu trúc chúng ta sẽ gửi tới DeepSeek API để yêu cầu phản hồi).

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

Hàm get_component_code() nhận một prompt do người dùng định nghĩa (ví dụ: “A blue card with white text”) và xây dựng payload phù hợp với định dạng thông điệp tương thích OpenAI của DeepSeek. Payload bao gồm:

• Tên mô hình, tức “deepseek-chat”
• Lịch sử hội thoại hai phần, tức “system + user”
• Thiết lập stream=False để nhận toàn bộ phản hồi một lần

Hàm gửi yêu cầu POST tới DeepSeek API bằng requests.post(). Nếu yêu cầu thành công, nó trích xuất đầu ra của mô hình từ trường choices[0].message.content.

Lưu ý: ‘deepseek-chat’ mặc định dùng phiên bản DeepSeek V3-0324 mới nhất (không cần chỉ định chính xác mô hình).

Bước 3: Xây dựng UI với Streamlit

Giờ trình tạo mã frontend đã sẵn sàng, hãy xây dựng UI Streamlit để kết nối mọi thứ.

1. Import

Bắt đầu bằng cách import các phụ thuộc của ứng dụng. Streamlit xây dựng UI và xử lý tương tác người dùng, còn html nhúng an toàn nội dung HTML trong iframe.

import streamlit as st
from frontend_generator import get_component_code
import html

2. Bản xem trước thành phần

Hãy xây dựng tính năng xem trước thành phần của ứng dụng, cho phép người dùng xem trước các thành phần ngay trong cửa sổ 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>
    """

Hàm get_component_code() được import từ tệp frontend_generator.py mà chúng ta đã tạo trước đó. Nó kết nối với DeepSeek API và tạo một thành phần Tailwind CSS dựa trên prompt của người dùng.

Sau đó, hàm create_component_preview() bao bọc mã HTML thô do mô hình trả về trong một tài liệu HTML đầy đủ, có Tailwind. Hàm áp dụng kiểu cơ bản để căn giữa và chứa thành phần UI trong bố cục linh hoạt.

3. Giao diện Streamlit

Khi đã có đủ các thành phần, chúng ta cần ghép chúng lại trong ứng dụng 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)}")

Hàm st.text_input() dùng một ví dụ được điền sẵn như "A red button with Hello text" để định hướng người dùng. Khi người dùng nhấp nút "Generate", ứng dụng sẽ:

1. Gọi hàm get_component_code(prompt) để lấy HTML sinh ra.
2. Hiển thị HTML thô bằng st.code() và bao mã HTML trong bố cục xem trước đầy đủ bằng hàm create_component_preview().
3. Cuối cùng, nhúng kết quả vào iframe bằng hàm st.components.v1.html() để kết xuất trực tiếp.

Việc dùng srcdoc trong iframe cho phép script và kiểu Tailwind tải trong khung xem trước tách biệt, giải quyết hạn chế của việc kết xuất HTML thô trong Streamlit.

Thiết lập này mang lại quy trình từ prompt tới xem trước liền mạch, nơi người dùng mô tả thành phần UI bằng ngôn ngữ tự nhiên và lập tức thấy cả mã bên dưới lẫn kết quả hiển thị.

Bước 4: Kiểm thử ứng dụng Streamlit

Khi mọi thành phần đã sẵn sàng, hãy chạy ứng dụng Streamlit của chúng ta. Chạy lệnh sau trong terminal:

streamlit run streamlit_app.py

Chúng ta mô tả thành phần bằng lời và nhấp Generate. DeepSeek V3-0324 sẽ sinh mã HTML dựa trên Tailwind, sau đó được kết xuất thành bản xem trước trực tiếp.

Kết luận

DeepSeek V3-0324 tiến thêm những bước thực chất về suy luận thực tiễn, thực thi mã, tạo UI và kỹ thuật prompt đa phương thức. Với tính mã nguồn mở và tốc độ rất nhanh, đây là lựa chọn tuyệt vời cho nhà phát triển đang làm việc với:

• Ứng dụng tăng cường công cụ
• Trợ lý đa lượt
• Trình tạo UI
• Công cụ đồng hành dựa trên suy luận

Để khám phá thêm các công cụ và mô hình AI mới, tôi gợi ý các blog sau:

• GPT-4o tạo ảnh: Hướng dẫn với 8 ví dụ thực tiễn
• OpenAI's Audio API: Hướng dẫn kèm dự án demo
• Gemini 2.5 Pro: Tính năng, kiểm thử, quyền truy cập, điểm chuẩn