Programa
Developing AI Applications
0 min
Desarrollar aplicaciones de IA
Aprende a crear aplicaciones de IA utilizando la API OpenAI.
¿Qué es DeepSeek-V3-0324?
DeepSeek-V3-0324 se basa en su predecesor, DeepSeek-V3con importantes mejoras en el razonamiento, la generación de front-end y las capacidades mejoradas de la herramienta.
En mi opinión, creo que podrían haber hecho mucho más ruido si hubieran llamado al nuevo modelo 3,5 en lugar de 0324, que es difícil de recordar. A juzgar por el nombre, la nueva versión sugiere sólo una mejora incremental, pero los puntos de referencia cuentan una historia diferente:
Fuente: DeepSeek
Los resultados del gráfico de barras anterior reflejan mejoras sustanciales en razonamiento lógico, resolución de problemas matemáticos y generación de código.
DeepSeek-V3-0324 muestra mejoras tangibles en la generación de HTML/CSS/JS utilizables, especialmente para tareas como:
- Componentes de interfaz de usuario basados en Tailwind
- Front-ends de juegos interactivos
- Código web ejecutable
El modelo actualizado también incluye funciones mejoradas para el uso de herramientas, como:
- La llamada a funciones es ahora más precisa como resultado de la corrección de incoherencias en versiones anteriores de la V3.
- Mejor calidad de reescritura, traducción y escritura en chino.
Al igual que DeepSeek-R1, V3-0324 lo es:
- De código abierto (pesos disponibles en Cara de abrazo)
- Con licencia MIT (libre para uso comercial)
Resumen del proyecto: Generador de IU con DeepSeek en Streamlit
Para poner a prueba las capacidades frontales de DeepSeek-V3-0324, he creado una pequeña demostración con Streamlit y Tailwind CSS. El proyecto es un generador de componentes de lenguaje natural a UI, y funciona así:
- Toma una indicación en lenguaje natural como "Un botón rojo con el texto Hola en blanco"
- Luego lo envía a DeepSeek-V3-0324 a través de la API
- Renderiza los siguientes componentes:
- El componente HTML generado por Tailwind.
- Una vista previa en directo en un iframe.
Paso 1: Requisitos previos
Antes de empezar, asegurémonos de que tenemos instaladas las siguientes herramientas y bibliotecas:
python3 --version # Python 3.8+
pip install requests streamlitComprueba la versión de Python, que debe ser al menos 3.8 o superior. A continuación, instala todas las demás dependencias mencionadas anteriormente.
A continuación, tenemos que configurar la clave API de DeepSeek como una variable de entorno utilizando el terminal. Para obtener tu clave API:
- Ir a la Plataforma API DeepSeek y crea una cuenta.
- Haz clic en Claves API en el lado izquierdo
- Haz clic en el botón Crear nueva clave API y sigue las instrucciones que aparecen en pantalla.
Si necesitas saber más sobre el uso de la API, este tutorial sobre la API DeepSeek es estupendo.
Ahora tenemos que configurar la clave API de DeepSeek como una variable de entorno utilizando el terminal:
export DEEPSEEK_API_KEY=”Your_API_Key”Ya tenemos todas las dependencias para nuestra aplicación, así que vamos a construir el generador de interfaz de usuario.
Paso 2: Construir el generador de IU
Comenzamos creando un archivo frontend_generator.py, que actúa como envoltorio del backend para generar el código de los componentes del frontend utilizando DeepSeek-V3-0324.
1. Importaciones
Empezaremos configurando las importaciones de nuestras dependencias.
import requests
import json
import osSe importan las bibliotecas requests, json y os para gestionar la comunicación HTTP, la serialización JSON y el acceso a variables de entorno para la clave API.
2. Configurar la clave API y la URL
A continuación, configuramos la clave de la API de DeepSeek y la URL de la API para la aplicación.
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}"
}Las variables API_KEY y API_URL (ya configuradas anteriormente) se establecen para autenticar y apuntan al punto final de finalización del chat DeepSeek. Las cabeceras de la petición especifican el tipo de contenido e incluyen el token de portador para la autorización.
3. Indicación del sistema
El SYSTEM_PROMPT define el comportamiento del asistente. Guía al modelo para generar un HTML legible y bien estructurado utilizando las clases CSS de Tailwind, garantizando que los elementos sean visualmente atractivos y estén correctamente centrados.
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. Construir la carga útil
Por último, vamos a construir la carga útil (los datos estructurados que enviaremos a la API de DeepSeek para solicitar una respuesta).
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}")La función get_component_code() toma un indicador definido por el usuario (por ejemplo: "Una tarjeta azul con texto blanco") y construye una carga útil adecuada al formato de mensaje compatible con OpenAI de DeepSeek. La carga útil incluye:
- El nombre del modelo, es decir, "deepseek-chat".
- Un historial de mensajes de dos partes, es decir, "sistema + usuario".
- Configurar
stream=Falsepara recibir una respuesta completa de una sola vez
La función envía una petición POST a la API de DeepSeek utilizando la función requests.post(). Si la solicitud tiene éxito, extrae la salida del modelo del campo choices[0].message.content.
Nota: 'deepseek-chat' utiliza por defecto la última versión de DeepSeek V3-0324 (no es necesario especificar el modelo exacto).
Paso 3: Construir la interfaz de usuario con Streamlit
Ahora que nuestro generador de código frontend está listo, vamos a construir la interfaz de usuario Streamlit que lo une todo.
1. Importaciones
Empezamos importando las dependencias de la aplicación. Streamlit construye la interfaz de usuario y gestiona las interacciones del usuario, mientras que html incrusta de forma segura el contenido HTML en un iframe.
import streamlit as st
from frontend_generator import get_component_code
import html2. Vista previa del componente
Vamos a construir la función de previsualización de componentes de nuestra aplicación, que permite a los usuarios previsualizar sus componentes en la ventana 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>
"""La función get_component_code() se importa del archivo frontend_generator.py que creamos anteriormente. Se conecta a la API de DeepSeek y genera un componente CSS de Tailwind basado en una petición del usuario.
A continuación, la función create_component_preview() envuelve el código HTML sin procesar devuelto por el modelo en un documento HTML completo, habilitado para Tailwind. Aplica un estilo básico al centro y contiene el componente de interfaz de usuario dentro de un diseño adaptable.
3. Interfaz de usuario Streamlit
Ahora que tenemos todos nuestros componentes, tenemos que unirlos con nuestra aplicación 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)}")La función st.text_input() utiliza un pre-rellenado con un ejemplo como "Un botón rojo con el texto Hola" para guiar al usuario. Cuando el usuario pulsa el botón "Generar", la aplicación hace lo siguiente:
- Llama a la función
get_component_code(prompt)para obtener el HTML generado. - Muestra el HTML sin procesar utilizando st.code() y envuelve el HTML en un diseño de vista previa completo utilizando la función
create_component_preview(). - Por último, incrusta el resultado dentro de un iframe utilizando la función
st.components.v1.html()para la renderización en directo.
El uso de srcdoc dentro del iframe permite que el script y los estilos de Tailwind se carguen dentro del marco de previsualización aislado, resolviendo las limitaciones de la renderización de HTML sin formato dentro de Streamlit.
Esta configuración permite un flujo fluido de consulta a vista previa en el que los usuarios pueden describir los componentes de la interfaz de usuario en lenguaje sencillo y ver inmediatamente tanto el código subyacente como el resultado renderizado.
Paso 4: Probar la aplicación Streamlit
Ahora que ya tenemos todos los componentes, vamos a ejecutar nuestra aplicación Streamlit. Vamos a ejecutar el siguiente comando en el terminal:
streamlit run streamlit_app.py
Podemos describir nuestro componente con palabras y hacer clic en Generar. Esto hará que DeepSeek V3-0324 produzca código HTML basado en Tailwind, que se mostrará como una vista previa visual en directo.
Conclusión
DeepSeek V3-0324 da verdaderos pasos adelante en el razonamiento práctico, la ejecución de código, la generación de IU y la ingeniería de avisos multimodal. Con su naturaleza de código abierto y su velocidad vertiginosa, es una opción excelente para los desarrolladores que trabajan en:
- Aplicaciones mejoradas con herramientas
- Asistentes multigiro
- Generadores de IU
- Copilotos basados en el razonamiento
Para explorar más herramientas y modelos nuevos de IA, te recomiendo estos blogs:
