Llama 3.3: Tutorial paso a paso con proyecto de demostración

Configuración de Llama 3.3

Para empezar, lo dividiremos en varios pasos. En primer lugar, veremos cómo acceder a Llama 3.3 mediante Cara Abrazada, configurar tu cuenta y obtener los permisos necesarios. A continuación, crearemos el entorno del proyecto e instalaremos las dependencias necesarias.

Acceder a Llama 3.3 en Cara Abrazada

Una forma de acceder a Llama 3.3 es a través de Hugging Face, una de las plataformas más populares para alojar modelos de aprendizaje automático. Para utilizar Llama 3.3 a través de la API de inferencia de Hugging Face, necesitarás

1. Una cuenta de Cara Abrazada.
• Ir a Cara de abrazo y regístrate para obtener una cuenta si aún no tienes una.
2. Un token de API con los permisos adecuados.
• Una vez iniciada la sesión, ve a la página de tus Fichas de Acceso.
• Generar un nuevo Ficha de lectura.
• Copia el token de forma segura.
3. Acceso al Modelo Llama-3.3-70B-Instruct.
• Navega hasta la página página Llama-3.3-70B-Instruir.
• Tendrás que aceptar las condiciones de la licencia y solicitar el acceso.
• Nota: El acceso a este modelo requiere una suscripción Pro. Asegúrate de que tu cuenta está actualizada.

Prepara el entorno de tu proyecto

Con el acceso al modelo asegurado, vamos a configurar el entorno de la aplicación. En primer lugar, vamos a crear una carpeta para este proyecto. Abre tu terminal, navega hasta donde quieras crear la carpeta de tu proyecto y ejecútala:

mkdir multilingual-code-explanation
cd multilingual-code-explanation

A continuación, crearemos un archivo llamado app.py para guardar el código: touch app.pyAhora, creamos un entorno y lo activamos:

python3 -m venv venv
source venv/bin/activate’

Instala las dependencias necesarias

Ahora que el entorno está listo, vamos a instalar las bibliotecas necesarias. Asegúrate de que estás ejecutando Python 3.8+. En el terminal, ejecuta el siguiente comando para instalar las bibliotecas Streamlit, Peticiones y Cara Abrazada:

pip install streamlit requests transformers huggingface-hub

A estas alturas, ya deberías haberlo hecho:

1. Una cuenta de Hugging Face con un token de API y acceso al modelo Llama 3.3.
2. Una carpeta de proyecto limpia y lista para codificar.
3. Todas las bibliotecas necesarias instaladas, incluidas:
• Streamlit para la interfaz.
• Solicitudes para hacer llamadas a la API.
• Transformadores y huggingface-hub para interactuar con los modelos Hugging Face.

Ahora que la configuración está completa, ¡estamos listos para crear la aplicación! En la siguiente sección, empezaremos a codificar la aplicación de explicación de código multilingüe paso a paso.

Escribe el backend

El backend se comunica con la API de Cara Abrazada para enviar el fragmento de código y recibir la explicación.

Importa las bibliotecas necesarias

En primer lugar, tenemos que importar la biblioteca requests. Esta biblioteca nos permite enviar peticiones HTTP a las API. En la parte superior de tu archivo app.py, escribe:

import requests

Configurar el acceso a la API

Para interactuar con la API Llama 3.3 alojada en Hugging Face, necesitas

1. El punto final de la API (URL donde está alojado el modelo).
2. Tu clave API de Hugging Face para la autenticación.

HUGGINGFACE_API_KEY = "hf_your_api_key_here"  # Replace with your actual API key
API_URL = "https://api-inference.huggingface.co/models/meta-llama/Llama-3.3-70B-Instruct"
HEADERS = {"Authorization": f"Bearer {HUGGINGFACE_API_KEY}"}

En el código anterior:

• Sustituye "hf_tu_clave_api_aquí" por el token que generaste antes.
• El diccionario HEADERS incluye la clave API para que Hugging Face sepa que estás autorizado a utilizar el punto final.

Escribe la función para consultar Llama 3.3

Ahora escribiremos una función para enviar una solicitud a la API. La función lo hará:

1. Construye una indicación que le diga al modelo lo que tiene que hacer.
2. Envía la solicitud a Cara Abrazada.
3. Maneja la respuesta y extrae la explicación generada.

def query_llama3(input_text, language):
   # Create the prompt
   prompt = (
       f"Provide a simple explanation of this code in {language}:\n\n{input_text}\n"
       f"Only output the explanation and nothing else. Make sure that the output is written in {language} and only in {language}"
   )
   # Payload for the API
   payload = {
       "inputs": prompt,
       "parameters": {"max_new_tokens": 500, "temperature": 0.3},
   }
  
   # Make the API request
   response = requests.post(API_URL, headers=HEADERS, json=payload)
   if response.status_code == 200:
       result = response.json()
      
       # Extract the response text
       full_response = result[0]["generated_text"] if isinstance(result, list) else result.get("generated_text", "")
      
       # Clean up: Remove the prompt itself from the response
       clean_response = full_response.replace(prompt, "").strip()
       # Further clean any leading colons or formatting
       if ":" in clean_response:
           clean_response = clean_response.split(":", 1)[-1].strip()
      
       return clean_response or "No explanation available."
   else:
       return f"Error: {response.status_code} - {response.text}"

La indicación le dice a Llama 3.3 que explique el fragmento de código en el idioma deseado. 

Descargo de responsabilidad: Experimenté con diferentes instrucciones para encontrar la que producía el mejor resultado, así que hubo un elemento de ingeniería de instrucciones en ello.

A continuación, se define la carga útil. Para la entrada, especificamos que el aviso se envíe al modelo. En los parámetros, max_new_tokens controla la longitud de respuesta, mientras que la temperatura ajusta el nivel de creatividad de la salida.

La función requests.post() envía los datos a Cara Abrazada. Si la respuesta es correcta (status_code == 200), se extrae el texto generado. Si hay un error, se devuelve un mensaje descriptivo.

Por último, hay pasos para limpiar y formatear correctamente la salida. Esto garantiza una presentación ordenada, lo que mejora significativamente la experiencia del usuario.

Construye el Frontend Streamlit

El frontend es donde los usuarios interactuarán con la aplicación. Streamlit es una biblioteca que crea aplicaciones web interactivas con sólo código Python y hace que este proceso sea sencillo e intuitivo. Esto es lo que utilizaremos para construir el frontend de nuestra aplicación. ¡Me gusta mucho Streamlit para construir demos y POC!

Importar Streamlit

En la parte superior de tu app.py añade:

import streamlit as st

Establecer la configuración de la página

Utilizaremos set_page_config() para definir el título y el diseño de la aplicación. En el código siguiente:

• page_title: Establece el título de la pestaña del navegador.
• layout="wide": Permite que la app utilice todo el ancho de la pantalla.

st.set_page_config(page_title="Multilingual Code Explanation Assistant", layout="wide")

Crear instrucciones para la barra lateral

Para ayudar a los usuarios a entender cómo utilizar la aplicación, vamos a añadir instrucciones a la barra lateral: En el código siguiente:

• st.sidebar.title(): Crea un título para la barra lateral.
• st.sidebar.markdown(): Añade texto con instrucciones sencillas.
• divider(): Añade una separación visual limpia.
• HTML personalizado: Muestra un pequeño pie de página en la parte inferior con un toque personal. ¡Siéntete libre de personalizar esta parte!

st.sidebar.title("How to Use the App")
st.sidebar.markdown("""
1. Paste your code snippet into the input box.
2. Enter the language you want the explanation in (e.g., English, Spanish, French).
3. Click 'Generate Explanation' to see the results.
""")
st.sidebar.divider()
st.sidebar.markdown(
   """
   <div style="text-align: center;color: grey;">
       Made with ♡ by Ana
   </div>
   """,
   unsafe_allow_html=True
)

Añade los componentes principales de la aplicación

Vamos a añadir el título principal y el subtítulo a la página:

st.title("Multilingual Code Explanation Assistant")
st.markdown("### Powered by Llama 3.3 from Hugging Face 🦙")

Ahora, para que los usuarios puedan pegar código y elegir su idioma preferido, necesitamos campos de entrada. Como es probable que el texto del código sea más largo que el nombre de la lengua, elegimos un área de texto para el código y una entrada de texto para la lengua:

• text_area(): Crea una caja grande para pegar código.
• text_input(): Permite a los usuarios escribir la lengua.

code_snippet = st.text_area("Paste your code snippet here:", height=200)
preferred_language = st.text_input("Enter your preferred language for explanation (e.g., English, Spanish):")

Ahora añadimos un botón para generar la explicación. Si el usuario introduce el código y el idioma y luego pulsa el botón Generar explicación, se genera una respuesta.

if st.button("Generate Explanation"):
	   if code_snippet and preferred_language:
	       with st.spinner("Generating explanation... ⏳"):
	           explanation = query_llama3(code_snippet, preferred_language)
	       st.subheader("Generated Explanation:")
	       st.write(explanation)
	   else:
	       st.warning("⚠️ Please provide both the code snippet and preferred language.")
	

Cuando se pulsa el botón, la app:

• Comprueba si se proporcionan el fragmento de código y el idioma.
• Muestra un spinner al consultar la API.
• Muestra la explicación generada o un aviso si falta alguna entrada.

Añadir un pie de página

Para terminar, vamos a añadir un pie de página:

st.markdown("---")
st.markdown("🧠 **Note**: This app uses Llama 3.3 from Hugging Face for multilingual code explanations.")

Ejecuta la App Llama 3.3

¡Es hora de ejecutar la aplicación! Para lanzar tu aplicación, ejecuta este código en el terminal:

streamlit run app.py

La aplicación se abrirá en tu navegador, ¡y podrás empezar a jugar con ella!

Probando Llama 3.3 en acción

Ahora que hemos construido nuestra aplicación de explicación de código multilingüe, es hora de probar lo bien que funciona el modelo. En esta sección, utilizaremos la aplicación para procesar un par de fragmentos de código y evaluar las explicaciones generadas en distintos idiomas.

Prueba 1: Función Factorial en Python

Para nuestra primera prueba, empecemos con un script de Python que calcula el factorial de un número utilizando la recursividad. Éste es el código que utilizaremos:

def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n - 1)
num = 5
result = factorial(num)
print(f"The factorial of {num} is {result}")

Este script define una función recursiva factorial(n) que calcula el factorial de un número dado. Para num = 5, la función calculará 5×4×3×2×1, dando como resultado 120. El resultado se imprime en la pantalla mediante la sentencia print(). Este es el resultado cuando generamos una explicación en español:

Como hispanohablante, puedo confirmar que la explicación identifica correctamente que el código calcula el factorial de un número utilizando la recursividad. Explica cómo funciona la recursividad paso a paso, desglosándola en términos sencillos.

El modelo explica el proceso de recursión y muestra cómo la función se llama a sí misma con valores decrecientes de n hasta llegar a 0.

La explicación está totalmente en español, como se pidió, demostrando las capacidades multilingües de Llama 3.3.

El uso de frases sencillas hace que el concepto de recursividad sea fácil de seguir, incluso para lectores no familiarizados con la programación.

Resume y menciona cómo funciona la recursividad para otras entradas como 3 y la importancia de la recursividad como concepto eficaz de resolución de problemas en programación.

Esta primera prueba pone de manifiesto la potencia de Llama 3.3:

• Explica con precisión el código paso a paso.
• La explicación se adapta al idioma solicitado (español en este caso).
• Los resultados son detallados, claros y aptos para principiantes, según las instrucciones.

Ahora que hemos probado un script de Python, podemos pasar a otros lenguajes de programación como JavaScript o SQL. Esto nos ayudará a explorar más a fondo las capacidades de Llama 3.3 en cuanto a razonamiento, codificación y soporte multilingüe.

Prueba 2: Función Factorial en Javascript

En esta prueba, evaluaremos lo bien que la aplicación de explicación de código multilingüe gestiona una función JavaScript y genera una explicación en francés.

Utilizaremos el siguiente fragmento de código JavaScript en el que he elegido intencionadamente variables ambiguas para ver lo bien que lo gestiona el modelo:

function x(a) {
    if (a === 1) return 1;
    return a * x(a - 1);
}
const y = 6;
const z = x(y);
console.log("The result is: " + z);

Este fragmento de código define una función recursiva x(a) que calcula el factorial de un número dado a. La condición básica comprueba si a === 1. Si es así, devuelve 1. En caso contrario, la función se llama a sí misma con a - 1 y multiplica el resultado por a. La constante y se fija en 6, por lo que la función x calcula 6×5×4×3×2×1. Por último, el resultado se almacena en la variable z y se muestra mediante console.log. Aquí tienes el resultado y la traducción al inglés:

Nota: Puedes ver que parece que la respuesta se recorta de repente, ¡pero es porque hemos limitado la salida a 500 tokens!

Tras traducirlo, llegué a la conclusión de que la explicación identifica correctamente que la función x(a) es recursiva. Desglosa cómo funciona la recursividad, explicando el caso base (a === 1) y el caso recursivo (a * x(a - 1)). La explicación muestra explícitamente cómo la función calcula el factorial de 6 y menciona los papeles de y (el valor de entrada) y z (el resultado). También indica cómo se utiliza console.log para mostrar el resultado.

La explicación está íntegramente en francés, como habías solicitado. Los términos técnicos como "récursive" (recursivo), "factorielle" (factorial) y "produit" (producto) se utilizan correctamente. Y no sólo eso, identifica que este código calcula el factorial de un número de forma recursiva.

La explicación evita la jerga demasiado técnica y simplifica la recursividad, haciéndola accesible a los lectores que se inician en la programación.

Esta prueba demuestra que Llama 3.3:

• Explica con precisión el código JavaScript que implica recursividad.
• Genera explicaciones claras y detalladas en francés.
• Adapta su explicación para incluir los roles variables y el comportamiento del código.

Ahora que hemos probado la aplicación con Python y JavaScript, pasemos a probarla con una consulta SQL para evaluar mejor sus capacidades multilingües y de razonamiento.

Prueba 3: Consulta SQL en alemán

En esta última prueba, evaluaremos cómo la App de explicación de código multilingüe gestiona una consulta SQL y genera una explicación en alemán. Aquí tienes el fragmento de SQL utilizado:

SELECT a.id, SUM(b.value) AS total_amount
FROM table_x AS a
JOIN table_y AS b ON a.ref_id = b.ref
WHERE b.flag = 1
GROUP BY a.id
HAVING SUM(b.value) > 1000
ORDER BY total_amount DESC;

Esta consulta selecciona la columna id y calcula el valor total (SUM(b.value)) para cada id. Lee datos de dos tablas: table_x (alias a) y table_y (alias b). A continuación, utiliza una condición JOIN para conectar las filas en las que a.ref_id = b.ref. Filtra las filas donde b.flag = 1 y agrupa los datos por a.id. La cláusula HAVING filtra los grupos para incluir sólo aquellos en los que la suma de b.value sea superior a 1000. Por último, ordena los resultados por total_amount en orden descendente.

Tras pulsar el botón de generar explicación, esto es lo que obtenemos:

La explicación generada es concisa, precisa y está bien estructurada. Cada cláusula SQL clave (SELECT, FROM, JOIN, WHERE, GROUP BY, HAVING y ORDER BY) se explica con claridad. Además, la descripción coincide con el orden de ejecución en SQL, lo que ayuda a los lectores a seguir la lógica de la consulta paso a paso.

La explicación está íntegramente en alemán, como habías solicitado.

Los términos clave de SQL (por ejemplo, "filtert", "gruppiert", "sortiert") se utilizan con precisión en el contexto. La explicación identifica que HAVING se utiliza para filtrar resultados agrupados, lo cual es una fuente habitual de confusión para los principiantes. También explica el uso de alias (AS) para renombrar tablas y columnas para mayor claridad.

La explicación evita la terminología demasiado compleja y se centra en la función de cada cláusula. Esto facilita a los principiantes la comprensión del funcionamiento de la consulta.

Esta prueba demuestra que Llama 3.3:

• Maneja eficazmente las consultas SQL.
• Genera explicaciones cláusula por cláusula, claras y estructuradas.
• Admite el alemán como lengua de salida.
• Proporciona detalles suficientes para ayudar a los principiantes a comprender la lógica que subyace a las consultas SQL.

Hemos probado la aplicación con fragmentos de código en Python, JavaScript y SQL, generando explicaciones en español, francés y alemán. En todas las pruebas:

• Las explicaciones fueron precisas, claras y detalladas.
• El modelo demostró una gran capacidad de razonamiento y apoyo multilingüe.

Con esta prueba, hemos confirmado que la aplicación que hemos construido es versátil, fiable y eficaz para explicar código en distintos lenguajes de programación y lenguajes naturales.

Conclusión

¡Enhorabuena! Has construido unasistente de explicación de código multilingüe totalmente funcional utilizando Streamlit y Llama 3.3 de Hugging Face.

En este tutorial has aprendido

1. Cómo integrar modelos de Cara Abrazada en una aplicación Streamlit.
2. Cómo utilizar la API Llama 3.3 para explicar fragmentos de código.
3. Cómo limpiar la respuesta de la API y crear una aplicación fácil de usar.

Este proyecto es un gran punto de partida para explorar las capacidades de Llama 3.3 en razonamiento de código, soporte multilingüe y contenido instructivo. No dudes en crear tu propia aplicación para seguir explorando las potentes funciones de este modelo.