Llama 3.3 : Tutoriel étape par étape avec projet de démonstration

Installation de Llama 3.3

Pour commencer, nous allons procéder en quelques étapes. Tout d'abord, nous verrons comment accéder au Llama 3.3 en utilisant Hugging Face, comment configurer votre compte et obtenir les permissions nécessaires. Ensuite, nous créerons l'environnement du projet et installerons les dépendances nécessaires.

Accéder à Llama 3.3 sur Hugging Face

L'un des moyens d'accéder à Llama 3.3 est de passer par Hugging Face, l'une des plateformes les plus populaires pour l'hébergement de modèles d'apprentissage automatique. Pour utiliser Llama 3.3 via l'API d'inférence de Hugging Face, vous aurez besoin de :

1. Un compte rendu de Hugging Face.
• Aller à Hugging Face et ouvrez un compte si vous n'en avez pas déjà un.
2. Un jeton API avec les bonnes autorisations.
• Une fois connecté, accédez à votre page de jetons d'accès.
• Générer un nouveau Jeton de lecture.
• Copiez le jeton en toute sécurité.
3. Accès au modèle Modèle Llama-3.3-70B-Instruire.
• Naviguez jusqu'à la page Llama-3.3-70B-Page d'instruction.
• Vous devrez accepter les conditions de la licence et demander l'accès.
• Note : L'accès à ce modèle nécessite un abonnement Pro. Assurez-vous que votre compte est mis à jour.

Préparer l'environnement de votre projet

Une fois l'accès au modèle sécurisé, configurons l'environnement de l'application. Tout d'abord, nous allons créer un dossier pour ce projet. Ouvrez votre terminal, naviguez jusqu'à l'endroit où vous souhaitez créer votre dossier de projet et exécutez :

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

Ensuite, nous créerons un fichier appelé app.py pour contenir le code : touch app.pyMaintenant, nous créons un environnement et nous l'activons :

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

Installer les dépendances nécessaires

Maintenant que l'environnement est prêt, installons les bibliothèques nécessaires. Assurez-vous que vous utilisez Python 3.8+. Dans le terminal, exécutez la commande suivante pour installer les bibliothèques Streamlit, Requests et Hugging Face :

pip install streamlit requests transformers huggingface-hub

Vous devriez maintenant l'avoir fait :

1. Un compte Hugging Face avec un jeton API et un accès au modèle Llama 3.3.
2. Un dossier de projet propre, prêt à être codé.
3. Toutes les bibliothèques nécessaires sont installées, y compris :
• Streamlit pour l'interface.
• Demandes d'appel à l'API.
• Transformers et huggingface-hub pour interagir avec les modèles de Hugging Face.

Maintenant que la configuration est terminée, nous sommes prêts à créer l'application ! Dans la section suivante, nous commencerons à coder l'application d'explication de code multilingue étape par étape.

Écrire le backend

Le backend communique avec l Hugging Face API pour envoyer l'extrait de code et recevoir l'explication.

Importer les bibliothèques nécessaires

Tout d'abord, nous devons importer la bibliothèque requests. Cette bibliothèque permet d'envoyer des requêtes HTTP aux API. Au début de votre fichier app.py, écrivez :

import requests

Configurer l'accès à l'API

Pour interagir avec l'API Llama 3.3 hébergée sur Hugging Face, vous devez :

1. Le point de terminaison de l'API (URL où le modèle est hébergé).
2. Votre clé d'API Hugging Face pour l'authentification.

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

Dans le code ci-dessus :

• Remplacez "hf_votre_clé_api_ici" par le jeton que vous avez généré précédemment.
• Le dictionnaire HEADERS inclut la clé API afin que Hugging Face sache que vous êtes autorisé à utiliser le point de terminaison.

Ecrivez la fonction permettant d'interroger le Llama 3.3

Nous allons maintenant écrire une fonction pour envoyer une requête à l'API. La fonction sera :

1. Construisez une invite qui indique au modèle ce qu'il doit faire.
2. Envoyez la demande à Hugging Face.
3. Traitez la réponse et extrayez l'explication générée.

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

L'invite indique à Llama 3.3 d'expliquer l'extrait de code dans la langue souhaitée. 

Avis de non-responsabilité : J'ai expérimenté différents messages-guides pour trouver celui qui produisait le meilleur résultat. d'ingénierie de l'incitation a été mis en œuvre !

Ensuite, la charge utile est définie. Pour l'entrée, nous spécifions que l'invite est envoyée au modèle. Dans les paramètres, max_new_tokens contrôle la longueur de la réponse, tandis que la température ajuste le niveau de créativité de la sortie.

La fonction requests.post() envoie les données à Hugging Face. Si la réponse est positive (status_code == 200), le texte généré est extrait. En cas d'erreur, un message descriptif est renvoyé.

Enfin, il existe des étapes pour nettoyer et formater correctement les résultats. Elle est ainsi présentée de manière claire, ce qui améliore considérablement l'expérience de l'utilisateur.

Construire le Frontend Streamlit

Le frontend est l'endroit où les utilisateurs interagissent avec l'application. Streamlit est une bibliothèque qui permet de créer des applications web interactives avec seulement du code Python et qui rend ce processus simple et intuitif. C'est ce que nous utiliserons pour construire le frontend de notre application. J'aime beaucoup Streamlit pour construire des démos et des POC !

Importer Streamlit

Au début de votre fichier app.py ajoutez :

import streamlit as st

Configuration de la page

Nous utiliserons set_page_config() pour définir le titre et la présentation de l'application. Dans le code ci-dessous :

• page_title: Définit le titre de l'onglet du navigateur.
• layout="wide": Permet à l'application d'utiliser toute la largeur de l'écran.

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

Créer des instructions dans la barre latérale

Pour aider les utilisateurs à comprendre comment utiliser l'application, nous allons ajouter des instructions dans la barre latérale : Dans le code ci-dessous :

• st.sidebar.title(): Crée un titre pour la barre latérale.
• st.sidebar.markdown(): Ajoute un texte avec des instructions simples.
• divider(): Ajoute une séparation visuelle nette.
• HTML personnalisé : Affiche un petit pied de page en bas de page avec une touche personnelle. N'hésitez pas à personnaliser cette partie !

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
)

Ajouter les composants principaux de l'application

Nous allons ajouter le titre principal et le sous-titre à la page :

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

Pour permettre aux utilisateurs de coller du code et de choisir leur langue préférée, nous avons besoin de champs de saisie. Comme le texte du code sera probablement plus long que le nom de la langue, nous choisissons une zone de texte pour le code et une zone de texte pour la langue :

• text_area(): Crée une grande boîte pour coller du code.
• text_input(): Permet aux utilisateurs de saisir la langue.

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

Nous ajoutons maintenant un bouton pour générer l'explication. Si l'utilisateur saisit le code et la langue, puis clique sur le bouton Generate Explanation, une réponse est générée.

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

Lorsque vous cliquez sur le bouton, l'application :

• Vérifie si l'extrait de code et la langue sont fournis.
• Affiche une barre de défilement lors de l'interrogation de l'API.
• Affiche l'explication générée ou un avertissement si l'entrée est manquante.

Ajouter un pied de page

Pour conclure, ajoutons un pied de page :

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

Courir le lama 3.3 App

Il est temps de lancer l'application ! Pour lancer votre application, exécutez ce code dans le terminal :

streamlit run app.py

L'application s'ouvrira dans votre navigateur et vous pourrez commencer à jouer avec !

Testing Llama 3.3 en action

Maintenant que nous avons créé notre application multilingue d'explication de code, il est temps de tester le fonctionnement du modèle. Dans cette section, nous utiliserons l'application pour traiter quelques extraits de code et évaluer les explications générées dans différentes langues.

Test 1 : Fonction factorielle en Python

Pour notre premier test, commençons par un script Python qui calcule la factorielle d'un nombre en utilisant la récursivité. Voici le code que nous allons utiliser :

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

Ce script définit une fonction récursive factorial(n) qui calcule la factorielle d'un nombre donné. Pour num = 5, la fonction calculera 5×4×3×2×1, ce qui donne 120. Le résultat est imprimé à l'écran à l'aide de l'instruction print(). Voici le résultat lorsque nous générons une explication en espagnol :

En tant qu'hispanophone, je peux confirmer que l'explication indique correctement que le code calcule la factorielle d'un nombre à l'aide de la récursivité. Il explique le fonctionnement de la récursion étape par étape, en le décomposant en termes simples.

Le modèle explique le processus de récursivité et montre comment la fonction s'appelle elle-même avec des valeurs décroissantes de n jusqu'à ce qu'elle atteigne 0.

L'explication est entièrement en espagnol, comme demandé, ce qui démontre les capacités multilingues de Llama 3.3.

L'utilisation de phrases simples rend le concept de récursion facile à suivre, même pour les lecteurs qui ne sont pas familiers avec la programmation.

Il résume et mentionne le fonctionnement de la récursion pour d'autres entrées comme 3 et l'importance de la récursion en tant que concept efficace de résolution de problèmes dans la programmation.

Ce premier test met en évidence la puissance de Llama 3.3 :

• Il explique le code de manière précise et étape par étape.
• L'explication s'adapte à la langue demandée (ici l'espagnol).
• Les résultats sont détaillés, clairs et adaptés aux débutants, conformément aux instructions.

Maintenant que nous avons testé un script Python, nous pouvons passer à d'autres langages de programmation comme JavaScript ou SQL. Cela nous permettra d'explorer plus avant les capacités de Llama 3.3 en matière de raisonnement, de codage et de prise en charge multilingue.

Test 2 : Fonction factorielle en Javascript

Dans ce test, nous allons évaluer la manière dont l'application multilingue d'explication de code gère une fonction JavaScript et génère une explication en français.

Nous utilisons l'extrait de code JavaScript suivant, dans lequel j'ai intentionnellement choisi des variables ambiguës, pour voir comment le modèle gère cette situation :

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);

Cet extrait de code définit une fonction récursive x(a) qui calcule la factorielle d'un nombre donné a. La condition de base vérifie si a === 1. Si c'est le cas, il renvoie 1. Sinon, la fonction s'appelle elle-même avec a - 1 et multiplie le résultat par a. La constante y est fixée à 6, de sorte que la fonction x calcule 6×5×4×3×2×1. Enfin, le résultat est stocké dans la variable z et affiché à l'aide de console.log. Voici le résultat et la traduction en anglais :

Note : Vous pouvez voir que la réponse est soudainement tronquée, mais c'est parce que nous avons limité la sortie à 500 tokens !

Après traduction, j'ai conclu que l'explication identifiait correctement que la fonction x(a) est récursive. Il explique le fonctionnement de la récursivité, le cas de base (a === 1) et le cas récursif (a * x(a - 1)). L'explication montre explicitement comment la fonction calcule la factorielle de 6 et mentionne les rôles de y (la valeur d'entrée) et z (le résultat). Il indique également comment console.log est utilisé pour afficher le résultat.

L'explication est entièrement en français, comme demandé. Les termes techniques tels que "récursive", "factorielle" et "produit" sont utilisés correctement. Et ce n'est pas tout, il identifie que ce code calcule la factorielle d'un nombre de manière récursive.

L'explication évite le jargon trop technique et simplifie la récursion, ce qui la rend accessible aux lecteurs novices en programmation.

Ce test démontre que Llama 3.3 :

• Explique avec précision le code JavaScript impliquant la récursivité.
• Génère des explications claires et détaillées en français.
• Adapte son explication pour inclure les rôles variables et le comportement du code.

Maintenant que nous avons testé l'application avec Python et JavaScript, passons au test avec une requête SQL pour évaluer davantage ses capacités multilingues et de raisonnement.

Test 3 : Requête SQL en allemand

Dans ce dernier test, nous allons évaluer comment l'application multilingue d'explication de code traite une requête SQL et génère une explication en allemand. Voici l'extrait SQL utilisé :

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;

Cette requête sélectionne la colonne id et calcule la valeur totale (SUM(b.value)) pour chaque id. Il lit les données de deux tableaux : table_x (alias a) et table_y (alias b). Ensuite, il utilise une condition JOIN pour relier les lignes où a.ref_id = b.ref. Il filtre les lignes où se trouve b.flag = 1 et regroupe les données par a.id. La clause HAVING filtre les groupes pour n'inclure que ceux dont la somme de b.value est supérieure à 1000. Enfin, il classe les résultats par total_amount dans l'ordre décroissant.

Après avoir appuyé sur le bouton "générer une explication", voici ce que nous obtenons :

L'explication générée est concise, précise et bien structurée. Chaque clause SQL clé (SELECT, FROM, JOIN, WHERE, GROUP BY, HAVING et ORDER BY) est clairement expliquée. De plus, la description correspond à l'ordre d'exécution du langage SQL, ce qui aide le lecteur à suivre la logique de la requête étape par étape.

L'explication est entièrement en allemand, comme demandé.

Les termes SQL clés (par exemple, "filtert", "gruppiert", "sortiert") sont utilisés avec précision dans le contexte. L'explication précise que l'option HAVING est utilisée pour filtrer les résultats groupés, ce qui est une source de confusion fréquente pour les débutants. Il explique également l'utilisation des alias (AS) pour renommer les tableaux et les colonnes par souci de clarté.

L'explication évite une terminologie trop complexe et se concentre sur la fonction de chaque clause. Cela permet aux débutants de comprendre facilement le fonctionnement de la requête.

Ce test démontre que Llama 3.3 :

• Traite efficacement les requêtes SQL.
• Génère des explications claires et structurées, clause par clause.
• Prend en charge l'allemand comme langue de sortie.
• Fournit suffisamment de détails pour aider les débutants à comprendre la logique qui sous-tend les requêtes SQL.

Nous avons testé l'application avec des extraits de code en Python, JavaScript et SQL, générant des explications en espagnol, français et allemand. Dans tous les tests :

• Les explications étaient précises, claires et détaillées.
• Le modèle a fait preuve d'une grande capacité de raisonnement et d'un soutien multilingue.

Ce test nous a permis de confirmer que l'application que nous avons créée est polyvalente, fiable et efficace pour expliquer le code dans différents langages de programmation et langues naturelles.

Conclusion

Félicitations ! Vous avez construit unassistant d'explication de code multilingue entièrement fonctionnel en utilisant Streamlit et Llama 3.3 de Hugging Face.

Dans ce tutoriel, vous avez appris :

1. Comment intégrer les modèles Hugging Face dans une application Streamlit.
2. Comment utiliser l'API Llama 3.3 pour expliquer des extraits de code.
3. Comment nettoyer la réponse de l'API et créer une application conviviale.

Ce projet est un excellent point de départ pour explorer les capacités de Llama 3.3 en matière de raisonnement de code, de support multilingue et de contenu pédagogique. N'hésitez pas à créer votre propre application pour continuer à explorer les puissantes fonctionnalités de ce modèle !