Llama 3.3: Tutorial Langkah demi Langkah dengan Proyek Demo

Menyiapkan Llama 3.3

Untuk memulai, kita akan membaginya menjadi beberapa langkah. Pertama, kita bahas cara mengakses Llama 3.3 menggunakan Hugging Face, menyiapkan akun Anda, dan mendapatkan izin yang diperlukan. Lalu, kita akan membuat lingkungan proyek dan memasang dependensi yang dibutuhkan.

Mengakses Llama 3.3 di Hugging Face

Salah satu cara mengakses Llama 3.3 adalah melalui Hugging Face, salah satu platform paling populer untuk meng-host model machine learning. Untuk menggunakan Llama 3.3 melalui Inference API Hugging Face, Anda memerlukan:

1. Akun Hugging Face.
• Buka Hugging Face dan daftar akun jika Anda belum memilikinya.
2. Token API dengan izin yang tepat.
• Setelah masuk, buka halaman Access Tokens Anda.
• Buat token Read baru.
• Salin token tersebut dengan aman.
3. Akses ke model Llama-3.3-70B-Instruct.
• Buka halaman Llama-3.3-70B-Instruct.
• Anda harus menyetujui ketentuan lisensi dan meminta akses.
• Catatan: Akses ke model ini memerlukan langganan Pro. Pastikan akun Anda telah ditingkatkan.

Siapkan lingkungan proyek Anda

Setelah akses model didapat, mari menyiapkan lingkungan aplikasi. Pertama, kita akan membuat folder untuk proyek ini. Buka terminal Anda, arahkan ke lokasi tempat Anda ingin membuat folder proyek, dan jalankan:

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

Kemudian, kita akan membuat berkas bernama app.py untuk menyimpan kode: touch app.pySekarang, kita membuat environment, dan mengaktifkannya:

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

Pasang dependensi yang diperlukan

Setelah lingkungan siap, mari pasang pustaka yang diperlukan. Pastikan Anda menjalankan Python 3.8+. Di terminal, jalankan perintah berikut untuk memasang Streamlit, Requests, dan pustaka Hugging Face:

pip install streamlit requests transformers huggingface-hub

Sampai di sini, Anda seharusnya sudah memiliki:

1. Akun Hugging Face dengan token API dan akses ke model Llama 3.3.
2. Folder proyek bersih yang siap untuk pengkodean.
3. Semua pustaka yang diperlukan terpasang, termasuk:
• Streamlit untuk antarmuka.
• Requests untuk melakukan panggilan API.
• Transformers dan huggingface-hub untuk berinteraksi dengan model Hugging Face.

Sekarang penyiapan selesai, kita siap membangun aplikasinya! Pada bagian berikutnya, kita akan mulai menulis kode aplikasi penjelasan kode multibahasa langkah demi langkah.

Tulis Backend

Backend berkomunikasi dengan Hugging Face API untuk mengirim cuplikan kode dan menerima penjelasan.

Impor pustaka yang diperlukan

Pertama, kita perlu mengimpor pustaka requests. Pustaka ini memungkinkan kita mengirim permintaan HTTP ke API. Di bagian atas berkas app.py Anda, tulis:

import requests

Siapkan akses API

Untuk berinteraksi dengan API Llama 3.3 yang di-host di Hugging Face, Anda memerlukan:

1. Endpoint API (URL tempat model di-host).
2. Kunci API Hugging Face Anda untuk autentikasi.

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

Pada kode di atas:

• Ganti "hf_your_api_key_here" dengan token yang Anda buat sebelumnya.
• Dictionary HEADERS menyertakan kunci API agar Hugging Face mengetahui Anda berhak menggunakan endpoint tersebut.

Tulis fungsi untuk melakukan kueri ke Llama 3.3

Sekarang, kita akan menulis fungsi untuk mengirim permintaan ke API. Fungsi ini akan:

1. Menyusun prompt yang memberi tahu model apa yang harus dilakukan.
2. Mengirim permintaan ke Hugging Face.
3. Menangani respons dan mengekstrak penjelasan yang dihasilkan.

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

Prompt menginstruksikan Llama 3.3 untuk menjelaskan cuplikan kode dalam bahasa yang diinginkan. 

Disclaimer: Saya bereksperimen dengan berbagai prompt untuk menemukan yang menghasilkan keluaran terbaik, jadi jelas ada unsur rekayasa prompt yang terlibat!

Selanjutnya, payload didefinisikan. Untuk input, kita menetapkan bahwa prompt dikirim ke model. Pada parameter, max_new_tokens mengontrol panjang respons, sementara temperature menyesuaikan tingkat kreativitas keluaran.

Fungsi requests.post() mengirim data ke Hugging Face. Jika respons berhasil (status_code == 200), teks yang dihasilkan diekstrak. Jika terjadi kesalahan, pesan deskriptif dikembalikan.

Terakhir, ada langkah-langkah untuk membersihkan dan memformat keluaran dengan benar. Ini memastikan hasilnya disajikan dengan rapi, yang sangat meningkatkan pengalaman pengguna.

Bangun Frontend Streamlit

Frontend adalah tempat pengguna berinteraksi dengan aplikasi. Streamlit adalah pustaka yang membuat aplikasi web interaktif hanya dengan kode Python dan membuat proses ini sederhana serta intuitif. Inilah yang akan kita gunakan untuk membangun frontend aplikasi kita. Saya sangat menyukai Streamlit untuk membangun demo dan POC!

Impor Streamlit

Di bagian atas berkas app.py Anda, tambahkan:

import streamlit as st

Atur konfigurasi halaman

Kita akan menggunakan set_page_config() untuk menentukan judul aplikasi dan tata letak. Pada kode di bawah:

• page_title: Menetapkan judul tab browser.
• layout="wide": Memungkinkan aplikasi menggunakan lebar layar penuh.

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

Buat instruksi di sidebar

Untuk membantu pengguna memahami cara menggunakan aplikasi, kita akan menambahkan instruksi ke sidebar: Pada kode di bawah:

• st.sidebar.title(): Membuat judul untuk sidebar.
• st.sidebar.markdown(): Menambahkan teks dengan instruksi sederhana.
• divider(): Menambahkan pemisah visual yang rapi.
• HTML kustom: Menampilkan catatan kaki kecil di bagian bawah dengan sentuhan personal. Silakan personalisasi bagian ini!

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
)

Tambahkan komponen utama aplikasi

Kita akan menambahkan judul utama dan subjudul ke halaman:

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

Sekarang, agar pengguna dapat menempelkan kode dan memilih bahasa yang diinginkan, kita memerlukan kolom input. Karena teks kode kemungkinan lebih panjang daripada nama bahasa, kita memilih area teks untuk kode dan input teks untuk bahasa:

• text_area(): Membuat kotak besar untuk menempelkan kode.
• text_input(): Memungkinkan pengguna mengetikkan bahasa.

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

Sekarang kita tambahkan tombol untuk menghasilkan penjelasan. Jika pengguna memasukkan kode dan bahasa lalu mengeklik tombol Generate Explanation, maka jawaban akan dihasilkan.

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

Saat tombol diklik, aplikasi akan:

• Memeriksa apakah cuplikan kode dan bahasa telah diisi.
• Menampilkan spinner saat melakukan kueri ke API.
• Menampilkan penjelasan yang dihasilkan atau peringatan jika input kurang.

Tambahkan footer

Sebagai penutup, mari tambahkan footer:

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

Jalankan Aplikasi Llama 3.3

Saatnya menjalankan aplikasi! Untuk meluncurkan aplikasi Anda, jalankan kode ini di terminal:

streamlit run app.py

Aplikasi akan terbuka di browser Anda, dan Anda bisa langsung mencobanya!

Menguji Llama 3.3 dalam Aksi

Setelah kita membangun aplikasi penjelasan kode multibahasa, saatnya menguji kinerja model. Pada bagian ini, kita akan menggunakan aplikasi untuk memproses beberapa cuplikan kode dan mengevaluasi penjelasan yang dihasilkan dalam berbagai bahasa.

Uji 1: Fungsi faktorial di Python

Untuk uji pertama, mari mulai dengan skrip Python yang menghitung faktorial sebuah angka menggunakan rekursi. Berikut kodenya:

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

Skrip ini mendefinisikan fungsi rekursif factorial(n) yang menghitung faktorial dari suatu angka. Untuk num = 5, fungsi akan menghitung 5×4×3×2×1 sehingga menghasilkan 120. Hasilnya dicetak ke layar menggunakan pernyataan print(). Berikut keluaran saat kita menghasilkan penjelasan dalam bahasa Spanyol:

Sebagai penutur bahasa Spanyol, saya dapat memastikan bahwa penjelasan tersebut dengan tepat mengidentifikasi bahwa kode menghitung faktorial suatu angka menggunakan rekursi. Penjelasan memaparkan cara kerja rekursi selangkah demi selangkah, memecahnya menjadi istilah yang sederhana.

Model menjelaskan proses rekursi dan menunjukkan bagaimana fungsi memanggil dirinya sendiri dengan nilai n yang menurun hingga mencapai 0.

Penjelasan sepenuhnya dalam bahasa Spanyol, sesuai permintaan, menunjukkan kemampuan multibahasa Llama 3.3.

Penggunaan frasa sederhana memudahkan konsep rekursi untuk diikuti, bahkan bagi pembaca yang belum akrab dengan pemrograman.

Penjelasan merangkum dan menyebutkan bagaimana rekursi bekerja untuk masukan lain seperti 3 serta pentingnya rekursi sebagai konsep pemecahan masalah yang efisien dalam pemrograman.

Uji pertama ini menyoroti kekuatan Llama 3.3:

• Secara akurat menjelaskan kode secara bertahap.
• Penjelasan beradaptasi dengan bahasa yang diminta (Spanyol dalam kasus ini).
• Hasilnya rinci, jelas, dan ramah pemula, sesuai instruksi.

Setelah menguji skrip Python, kita dapat beralih ke bahasa pemrograman lain seperti JavaScript atau SQL. Ini akan membantu kita mengeksplorasi lebih jauh kemampuan Llama 3.3 dalam penalaran, pengkodean, dan dukungan multibahasa.

Uji 2: Fungsi faktorial di Javascript

Pada uji ini, kita akan mengevaluasi seberapa baik aplikasi penjelasan kode multibahasa menangani sebuah fungsi JavaScript dan menghasilkan penjelasan dalam bahasa Prancis.

Kita menggunakan cuplikan kode JavaScript berikut di mana saya sengaja memilih variabel yang ambigu untuk melihat seberapa baik model menanganinya:

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

Cuplikan kode ini mendefinisikan fungsi rekursif x(a) yang menghitung faktorial dari angka a yang diberikan. Kondisi dasar memeriksa apakah a === 1. Jika ya, mengembalikan 1. Jika tidak, fungsi memanggil dirinya sendiri dengan a - 1 dan mengalikan hasilnya dengan a. Konstanta y diatur ke 6, sehingga fungsi x menghitung 6×5×4×3×2×1. Akhirnya, hasil disimpan dalam variabel z dan ditampilkan menggunakan console.log. Berikut keluarannya dan terjemahannya dalam bahasa Inggris:

Catatan: Anda dapat melihat respons tampak terpotong tiba-tiba, tetapi itu karena kita membatasi keluaran hingga 500 token!

Setelah menerjemahkannya, saya menyimpulkan bahwa penjelasan dengan tepat mengidentifikasi bahwa fungsi x(a) bersifat rekursif. Penjelasan memecah cara kerja rekursi, menjelaskan kasus dasar (a === 1) dan kasus rekursif (a * x(a - 1)). Penjelasan secara eksplisit menunjukkan bagaimana fungsi menghitung faktorial dari 6 dan menyebutkan peran y (nilai masukan) dan z (hasil). Penjelasan juga menyoroti bagaimana console.log digunakan untuk menampilkan hasil.

Penjelasan sepenuhnya dalam bahasa Prancis, sesuai permintaan. Istilah teknis seperti “récursive” (rekursif), “factorielle” (faktorial), dan “produit” (hasil kali) digunakan dengan benar. Bukan hanya itu, penjelasan juga mengidentifikasi bahwa kode ini menghitung faktorial suatu angka dengan cara rekursif.

Penjelasan menghindari jargon yang terlalu teknis dan menyederhanakan rekursi, sehingga mudah diakses oleh pembaca yang baru mengenal pemrograman.

Uji ini menunjukkan bahwa Llama 3.3:

• Secara akurat menjelaskan kode JavaScript yang melibatkan rekursi.
• Menghasilkan penjelasan yang jelas dan terperinci dalam bahasa Prancis.
• Menyesuaikan penjelasan dengan menyertakan peran variabel dan perilaku kode.

Setelah menguji aplikasi dengan Python dan JavaScript, mari lanjut mengujinya dengan kueri SQL untuk mengevaluasi lebih jauh kemampuan multibahasa dan penalarannya.

Uji 3: Kueri SQL dalam bahasa Jerman

Pada uji terakhir ini, kita akan mengevaluasi bagaimana Aplikasi penjelasan kode multibahasa menangani kueri SQL dan menghasilkan penjelasan dalam bahasa Jerman. Berikut cuplikan SQL yang digunakan:

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;

Kueri ini memilih kolom id dan menghitung total nilai (SUM(b.value)) untuk setiap id. Kueri membaca data dari dua tabel: table_x (alias a) dan table_y (alias b). Lalu menggunakan kondisi JOIN untuk menghubungkan baris di mana a.ref_id = b.ref. Kueri memfilter baris yang memiliki b.flag = 1 dan mengelompokkan data berdasarkan a.id. Klausa HAVING memfilter grup agar hanya menyertakan yang jumlah b.value-nya lebih dari 1000. Terakhir, hasil diurutkan berdasarkan total_amount secara menurun.

Setelah menekan tombol generate explanation, berikut yang kita dapatkan:

Penjelasan yang dihasilkan ringkas, akurat, dan terstruktur dengan baik. Setiap klausa kunci SQL (SELECT, FROM, JOIN, WHERE, GROUP BY, HAVING, dan ORDER BY) dijelaskan dengan jelas. Selain itu, deskripsi mengikuti urutan eksekusi di SQL, yang membantu pembaca mengikuti logika kueri selangkah demi selangkah.

Penjelasan sepenuhnya dalam bahasa Jerman, sesuai permintaan.

Istilah-istilah SQL kunci (misalnya, "filtert", "gruppiert", "sortiert") digunakan secara akurat dalam konteksnya. Penjelasan mengidentifikasi bahwa HAVING digunakan untuk memfilter hasil yang telah dikelompokkan, yang sering membingungkan bagi pemula. Penjelasan juga menerangkan penggunaan alias (AS) untuk mengganti nama tabel dan kolom agar lebih jelas.

Penjelasan menghindari terminologi yang terlalu kompleks dan berfokus pada fungsi setiap klausa. Ini memudahkan pemula memahami cara kerja kueri.

Uji ini menunjukkan bahwa Llama 3.3:

• Menangani kueri SQL secara efektif.
• Menghasilkan penjelasan per klausa yang jelas dan terstruktur.
• Mendukung bahasa Jerman sebagai bahasa keluaran.
• Memberikan detail yang cukup untuk membantu pemula memahami logika di balik kueri SQL.

Kita telah menguji aplikasi dengan cuplikan kode dalam Python, JavaScript, dan SQL, serta menghasilkan penjelasan dalam bahasa Spanyol, Prancis, dan Jerman. Pada setiap uji:

• Penjelasan akurat, jelas, dan terperinci.
• Model menunjukkan kemampuan penalaran yang kuat dan dukungan multibahasa.

Dengan uji ini, kita telah memastikan bahwa aplikasi yang kita bangun serbaguna, andal, dan efektif untuk menjelaskan kode di berbagai bahasa pemrograman dan bahasa alami.

Kesimpulan

Selamat! Anda telah membangun sebuah asisten penjelasan kode multibahasa yang sepenuhnya fungsional menggunakan Streamlit dan Llama 3.3 dari Hugging Face.

Dalam tutorial ini, Anda mempelajari:

1. Cara mengintegrasikan model Hugging Face ke dalam aplikasi Streamlit.
2. Cara menggunakan API Llama 3.3 untuk menjelaskan cuplikan kode.
3. Cara membersihkan respons API dan membuat aplikasi yang ramah pengguna.

Proyek ini adalah titik awal yang bagus untuk mengeksplorasi kemampuan Llama 3.3 dalam penalaran kode, dukungan multibahasa, dan konten instruksional. Silakan buat aplikasi Anda sendiri untuk terus mengeksplorasi fitur-fitur kuat model ini!