DeepSeek-V3-0324: Um guia com projeto de demonstração

O que é o DeepSeek-V3-0324?

O DeepSeek-V3-0324 se baseia em seu antecessor, DeepSeek-V3com grandes aprimoramentos no raciocínio, na geração de front-end e nos recursos de ferramentas.

Se você me perguntar, acho que eles poderiam ter feito muito mais barulho se tivessem batizado o novo modelo de 3.5 em vez de 0324, que é difícil de lembrar. A julgar pelo nome, a nova versão sugere apenas uma melhoria incremental, mas os benchmarks contam uma história diferente:

Fonte: DeepSeek

Os resultados no gráfico de barras acima refletem melhorias substanciais no raciocínio lógico, na resolução de problemas matemáticos e na geração de códigos.

O DeepSeek-V3-0324 mostra melhorias tangíveis na geração de HTML/CSS/JS utilizáveis, especialmente para tarefas como:

• Componentes da interface do usuário baseados no Tailwind
• Front-ends de jogos interativos
• Código da Web executável

O modelo atualizado também vem com recursos aprimorados de uso da ferramenta, incluindo:

• A chamada de funções agora é mais precisa como resultado da correção de inconsistências em versões anteriores da V3.
• Melhor qualidade de reescrita, tradução e escrita em chinês em várias voltas.

Assim como o DeepSeek-R1, o V3-0324 é:

• Código aberto (pesos disponíveis em Hugging Face)
• Licenciado pelo MIT (gratuito para uso comercial)

Visão geral do projeto: Gerador de interface do usuário com tecnologia DeepSeek no Streamlit

Para testar os recursos de front-end do DeepSeek-V3-0324, criei uma pequena demonstração com o Streamlit e o Tailwind CSS. O projeto é um gerador de componentes de linguagem natural para UI e funciona da seguinte forma:

• É necessário um prompt de linguagem natural, como: "Um botão vermelho com o texto Hello em branco"
• Em seguida, ele o envia para o DeepSeek-V3-0324 por meio da API
• Ele renderiza os seguintes componentes:
• O componente HTML gerado pelo Tailwind.
• Uma visualização ao vivo em um iframe.

Etapa 1: Pré-requisitos

Antes de começarmos, vamos garantir que você tenha as seguintes ferramentas e bibliotecas instaladas:

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

Verifique a versão do Python, que deve ser pelo menos 3.8 ou superior. Em seguida, instale todas as outras dependências mencionadas acima.

Em seguida, precisamos configurar a chave da API do DeepSeek como uma variável de ambiente usando o terminal. Para obter sua chave de API:

1. Vá para a plataforma DeepSeek API e crie uma conta.
2. Clique no botão Chaves de API no lado esquerdo

3. Clique no botão Criar nova chave de API e siga as instruções na tela.

Se você precisar saber mais sobre como usar a API, este tutorial sobre API do DeepSeek é excelente.

Agora precisamos configurar a chave da API do DeepSeek como uma variável de ambiente usando o terminal:

export DEEPSEEK_API_KEY=”Your_API_Key”

Agora que temos todas as dependências do nosso aplicativo, vamos criar o gerador de interface do usuário.

Etapa 2: Criação do gerador de interface do usuário

Começamos criando um arquivo frontend_generator.py, que atua como um wrapper de back-end para gerar código de componente de front-end usando o DeepSeek-V3-0324.

1. Importações

Começamos configurando as importações para nossas dependências.

import requests
import json
import os

As bibliotecas requests, json e os são importadas para lidar com a comunicação HTTP, a serialização JSON e o acesso à variável de ambiente para a chave da API.

2. Configuração da chave de API e do URL

Em seguida, configuramos a chave da API do DeepSeek e o URL da API para o aplicativo.

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

As variáveis API_KEY e API_URL (já definidas anteriormente) são definidas para autenticar e apontar para o ponto de extremidade de conclusão de bate-papo do DeepSeek. Os cabeçalhos da solicitação especificam o tipo de conteúdo e incluem o token do portador para autorização.

3. Prompt do sistema

O site SYSTEM_PROMPT define o comportamento do assistente. Ele orienta o modelo para gerar HTML legível e bem estruturado usando as classes CSS do Tailwind, garantindo que os elementos sejam visualmente atraentes e centralizados corretamente.

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. Criando a carga útil

Por fim, vamos criar o payload (os dados estruturados que enviaremos à API do DeepSeek para solicitar uma resposta).

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

A função get_component_code() usa um prompt definido pelo usuário (por exemplo: "Um cartão azul com texto branco") e cria uma carga útil que é adequada ao formato de mensagem compatível com OpenAI do DeepSeek. A carga útil inclui:

• O nome do modelo, ou seja, "deepseek-chat"
• Um histórico de mensagens em duas partes, ou seja, "sistema + usuário"
• Configurando stream=False para receber uma resposta completa de uma só vez

A função envia uma solicitação POST para a API do DeepSeek usando a função requests.post(). Se a solicitação for bem-sucedida, você extrairá a saída do modelo do campo choices[0].message.content.

Observação: Por padrão, o 'deepseek-chat' usa a versão mais recente do DeepSeek V3-0324 (não há necessidade de especificar o modelo exato).

Etapa 3: Criar a interface do usuário com o Streamlit

Agora que nosso gerador de código de front-end está pronto, vamos criar a interface do usuário do Streamlit que une tudo.

1. Importações

Começamos importando as dependências do aplicativo. Streamlit cria a interface do usuário e lida com as interações do usuário, enquanto o html incorpora com segurança o conteúdo HTML em um iframe.

import streamlit as st
from frontend_generator import get_component_code
import html

2. Visualização do componente

Vamos criar o recurso de visualização de componentes do nosso aplicativo, que permite que os usuários visualizem seus componentes na janela do 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>
    """

A função get_component_code() é importada do arquivo frontend_generator.py que criamos anteriormente. Ele se conecta à API do DeepSeek e gera um componente CSS do Tailwind com base em uma solicitação do usuário.

Em seguida, a função create_component_preview() agrupa o código HTML bruto retornado pelo modelo em um documento HTML completo e habilitado para o Tailwind. Ele aplica um estilo básico ao centro e contém o componente da interface do usuário em um layout responsivo.

3. IU do Streamlit

Agora que temos todos os nossos componentes, precisamos uni-los ao nosso aplicativo 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)}")

A função st.text_input() usa um exemplo pré-preenchido como "Um botão vermelho com texto Hello" para orientar o usuário. Quando o usuário clica no botão "Generate" (Gerar), o aplicativo faz o seguinte:

1. Chama a função get_component_code(prompt) para buscar o HTML gerado.
2. Ele exibe o HTML bruto usando st.code() e envolve o HTML em um layout de visualização completo usando a função create_component_preview().
3. Por fim, incorpora o resultado em um iframe usando a função st.components.v1.html() para renderização ao vivo.

O uso do srcdoc dentro do iframe permite que o script e os estilos do Tailwind sejam carregados dentro do quadro de visualização isolado, resolvendo as limitações da renderização de HTML bruto dentro do Streamlit.

Essa configuração permite um fluxo contínuo de solicitação para visualização em que os usuários podem descrever os componentes da interface do usuário em linguagem simples e ver imediatamente o código subjacente e o resultado renderizado.

Etapa 4: Testando o aplicativo Streamlit

Agora que temos todos os componentes instalados, vamos executar nosso aplicativo Streamlit. Vamos executar o seguinte comando no terminal:

streamlit run streamlit_app.py

Podemos descrever nosso componente em palavras e clicar em Generate. Isso fará com que o DeepSeek V3-0324 produza um código HTML baseado no Tailwind, que é então renderizado como uma visualização ao vivo.

Conclusão

O DeepSeek V3-0324 dá passos reais em raciocínio prático, execução de código, geração de interface do usuário e engenharia de prompt multimodal. Com sua natureza de código aberto e velocidade incrível, é uma excelente opção para os desenvolvedores que trabalham com..:

• Aplicativos com ferramentas
• Assistentes de várias voltas
• Geradores de interface do usuário
• Copilotos baseados em raciocínio

Para explorar mais ferramentas e modelos novos de IA, recomendo estes blogs:

• GPT-4o Geração de imagens: Um guia com 8 exemplos práticos
• API de áudio da OpenAI: Um guia com projeto de demonstração
• Gemini 2.5 Pro: Recursos, testes, acesso, benchmarks