Llama 3.3: Hướng dẫn Từng Bước Kèm Dự Án Demo

Thiết lập Llama 3.3

Để bắt đầu, chúng ta sẽ chia thành vài bước. Trước tiên, chúng ta sẽ đề cập đến cách truy cập Llama 3.3 bằng Hugging Face, thiết lập tài khoản và nhận quyền cần thiết. Sau đó, chúng ta sẽ tạo môi trường dự án và cài đặt các phụ thuộc bắt buộc.

Truy cập Llama 3.3 trên Hugging Face

Một cách để truy cập Llama 3.3 là thông qua Hugging Face, một trong những nền tảng phổ biến nhất để lưu trữ các mô hình máy học. Để sử dụng Llama 3.3 qua Inference API của Hugging Face, bạn sẽ cần:

1. Một tài khoản Hugging Face.
• Truy cập Hugging Face và đăng ký tài khoản nếu bạn chưa có.
2. Một API token với đúng quyền hạn.
• Sau khi đăng nhập, vào trang Access Tokens của bạn.
• Tạo một Read token mới.
• Sao chép token một cách an toàn.
3. Quyền truy cập vào mô hình Llama-3.3-70B-Instruct.
• Đi đến trang Llama-3.3-70B-Instruct.
• Bạn sẽ cần đồng ý với điều khoản giấy phép và yêu cầu quyền truy cập.
• Lưu ý: Truy cập mô hình này yêu cầu gói Pro. Hãy đảm bảo tài khoản của bạn đã được nâng cấp.

Chuẩn bị môi trường dự án

Khi đã có quyền truy cập mô hình, hãy thiết lập môi trường của ứng dụng. Trước tiên, chúng ta sẽ tạo một thư mục cho dự án này. Mở terminal, chuyển đến nơi bạn muốn tạo thư mục dự án và chạy:

mkdir multilingual-code-explanation
cd multilingual-code-explanationĐược hỗ trợ bởi

Sau đó, chúng ta sẽ tạo một tệp tên là app.py để chứa mã: touch app.pyBây giờ, chúng ta tạo môi trường ảo và kích hoạt nó:

python3 -m venv venv
source venv/bin/activate’Được hỗ trợ bởi

Cài đặt các phụ thuộc cần thiết

Khi môi trường đã sẵn sàng, hãy cài đặt các thư viện cần thiết. Đảm bảo bạn đang chạy Python 3.8+. Trong terminal, chạy lệnh sau để cài Streamlit, Requests và các thư viện của Hugging Face:

pip install streamlit requests transformers huggingface-hubĐược hỗ trợ bởi

Đến lúc này, bạn nên có:

1. Một tài khoản Hugging Face với API token và quyền truy cập vào mô hình Llama 3.3.
2. Một thư mục dự án sạch, sẵn sàng để viết mã.
3. Tất cả thư viện cần thiết đã được cài đặt, bao gồm:
• Streamlit cho giao diện.
• Requests để gọi API.
• Transformers và huggingface-hub để tương tác với các mô hình trên Hugging Face.

Giờ phần thiết lập đã hoàn tất, chúng ta sẵn sàng xây dựng ứng dụng! Ở phần tiếp theo, chúng ta sẽ bắt đầu viết mã ứng dụng giải thích mã đa ngôn ngữ từng bước.

Viết Backend

Phần backend giao tiếp với Hugging Face API để gửi đoạn mã và nhận phần giải thích.

Import các thư viện cần thiết

Trước hết, chúng ta cần import thư viện requests. Thư viện này cho phép chúng ta gửi các yêu cầu HTTP đến API. Ở đầu tệp app.py của bạn, viết:

import requestsĐược hỗ trợ bởi

Thiết lập truy cập API

Để tương tác với API Llama 3.3 được lưu trữ trên Hugging Face, bạn cần:

1. Endpoint API (URL nơi mô hình được lưu trữ).
2. Khóa API Hugging Face của bạn để xác thực.

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}"}Được hỗ trợ bởi

Trong đoạn mã trên:

• Thay "hf_your_api_key_here" bằng token bạn đã tạo trước đó.
• Từ điển HEADERS bao gồm khóa API để Hugging Face biết bạn được phép sử dụng endpoint.

Viết hàm truy vấn Llama 3.3

Giờ chúng ta sẽ viết một hàm để gửi yêu cầu đến API. Hàm sẽ:

1. Tạo một prompt hướng dẫn mô hình cần làm gì.
2. Gửi yêu cầu đến Hugging Face.
3. Xử lý phản hồi và trích xuất phần giải thích được tạo.

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}"Được hỗ trợ bởi

Prompt yêu cầu Llama 3.3 giải thích đoạn mã bằng ngôn ngữ mong muốn. 

Lưu ý: Tôi đã thử nghiệm nhiều prompt khác nhau để tìm ra prompt cho kết quả tốt nhất, nên chắc chắn có yếu tố kỹ thuật prompt ở đây!

Tiếp theo, payload được định nghĩa. Đối với input, chúng ta chỉ định prompt sẽ được gửi đến mô hình. Trong parameters, max_new_tokens kiểm soát độ dài phản hồi, còn temperature điều chỉnh mức độ sáng tạo của đầu ra.

Hàm requests.post() gửi dữ liệu đến Hugging Face. Nếu phản hồi thành công (status_code == 200), văn bản được tạo sẽ được trích xuất. Nếu có lỗi, một thông báo mô tả sẽ được trả về.

Cuối cùng, có các bước để làm sạch và định dạng đầu ra phù hợp. Điều này đảm bảo nội dung được trình bày gọn gàng, cải thiện đáng kể trải nghiệm người dùng.

Xây dựng Frontend bằng Streamlit

Frontend là nơi người dùng tương tác với ứng dụng. Streamlit là một thư viện tạo ứng dụng web tương tác chỉ với mã Python, giúp quy trình này đơn giản và trực quan. Đây là công cụ chúng ta sẽ dùng để xây dựng frontend cho ứng dụng. Tôi rất thích dùng Streamlit để làm demo và POC!

Import Streamlit

Ở đầu tệp app.py của bạn, thêm:

import streamlit as stĐược hỗ trợ bởi

Thiết lập cấu hình trang

Chúng ta sẽ dùng set_page_config() để đặt tiêu đề ứng dụng và bố cục. Trong đoạn mã dưới đây:

• page_title: Đặt tiêu đề thẻ tab trình duyệt.
• layout="wide": Cho phép ứng dụng sử dụng toàn bộ chiều rộng màn hình.

st.set_page_config(page_title="Multilingual Code Explanation Assistant", layout="wide")Được hỗ trợ bởi

Tạo hướng dẫn ở thanh bên

Để giúp người dùng hiểu cách sử dụng ứng dụng, chúng ta sẽ thêm hướng dẫn vào thanh bên: Trong đoạn mã dưới đây:

• st.sidebar.title(): Tạo tiêu đề cho thanh bên.
• st.sidebar.markdown(): Thêm văn bản với hướng dẫn đơn giản.
• divider(): Thêm đường phân tách gọn gàng.
• HTML tuỳ chỉnh: Hiển thị một phần chân trang nhỏ ở dưới cùng với dấu ấn cá nhân. Bạn cứ thoải mái cá nhân hóa phần này!

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
)Được hỗ trợ bởi

Thêm các thành phần chính của ứng dụng

Chúng ta sẽ thêm tiêu đề chính và phụ đề vào trang:

st.title("Multilingual Code Explanation Assistant")
st.markdown("### Powered by Llama 3.3 from Hugging Face 🦙")Được hỗ trợ bởi

Bây giờ, để người dùng dán mã và chọn ngôn ngữ ưa thích, chúng ta cần các trường nhập liệu. Vì văn bản mã có thể dài hơn tên ngôn ngữ, chúng ta chọn vùng văn bản cho mã và ô nhập văn bản cho ngôn ngữ:

• text_area(): Tạo một hộp lớn để dán mã.
• text_input(): Cho phép người dùng nhập ngôn ngữ.

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):")Được hỗ trợ bởi

Giờ chúng ta thêm một nút để tạo phần giải thích. Nếu người dùng nhập mã và ngôn ngữ rồi nhấp nút Generate Explanation thì câu trả lời sẽ được tạo.

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.")
	Được hỗ trợ bởi

Khi nút được nhấn, ứng dụng sẽ:

• Kiểm tra xem đã cung cấp đoạn mã và ngôn ngữ hay chưa.
• Hiển thị vòng quay trong khi truy vấn API.
• Hiển thị phần giải thích được tạo hoặc cảnh báo nếu thiếu đầu vào.

Thêm chân trang

Để kết thúc, hãy thêm một chân trang:

st.markdown("---")
st.markdown("🧠 **Note**: This app uses Llama 3.3 from Hugging Face for multilingual code explanations.")Được hỗ trợ bởi

Chạy Ứng dụng Llama 3.3

Đến lúc chạy ứng dụng! Để khởi chạy ứng dụng của bạn, chạy lệnh này trong terminal:

streamlit run app.pyĐược hỗ trợ bởi

Ứng dụng sẽ mở trong trình duyệt, và bạn có thể bắt đầu thử nghiệm!

Kiểm thử Llama 3.3 trong Thực tế

Giờ chúng ta đã xây dựng xong ứng dụng giải thích mã đa ngôn ngữ, đã đến lúc kiểm tra mức độ hiệu quả của mô hình. Trong phần này, chúng ta sẽ dùng ứng dụng để xử lý một vài đoạn mã và đánh giá các phần giải thích được tạo bằng các ngôn ngữ khác nhau.

Kiểm thử 1: Hàm giai thừa trong Python

Cho bài kiểm thử đầu tiên, hãy bắt đầu với một đoạn script Python tính giai thừa của một số bằng đệ quy. Đây là đoạn mã chúng ta sẽ dùng:

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}")Được hỗ trợ bởi

Đoạn script này định nghĩa một hàm đệ quy factorial(n) tính giai thừa của một số cho trước. Với num = 5, hàm sẽ tính 5×4×3×2×1, cho kết quả 120. Kết quả được in ra màn hình bằng câu lệnh print(). Đây là đầu ra khi chúng ta tạo phần giải thích bằng tiếng Tây Ban Nha:

Với tư cách người nói tiếng Tây Ban Nha, tôi có thể xác nhận phần giải thích đã xác định chính xác rằng đoạn mã tính giai thừa của một số bằng đệ quy. Nó diễn giải cách đệ quy hoạt động từng bước, phân tích thành các thuật ngữ đơn giản.

Mô hình giải thích quá trình đệ quy và cho thấy hàm tự gọi chính nó với các giá trị n giảm dần cho đến khi đạt 0.

Phần giải thích hoàn toàn bằng tiếng Tây Ban Nha như yêu cầu, thể hiện khả năng đa ngôn ngữ của Llama 3.3.

Việc dùng các cụm từ đơn giản giúp khái niệm đệ quy dễ theo dõi, ngay cả với độc giả chưa quen lập trình.

Nó tóm tắt và đề cập cách đệ quy hoạt động với các đầu vào khác như 3 và nhấn mạnh tầm quan trọng của đệ quy như một khái niệm giải quyết vấn đề hiệu quả trong lập trình.

Bài kiểm thử đầu tiên này nêu bật sức mạnh của Llama 3.3:

• Giải thích chính xác đoạn mã theo từng bước.
• Phần giải thích thích ứng với ngôn ngữ được yêu cầu (trong trường hợp này là tiếng Tây Ban Nha).
• Kết quả chi tiết, rõ ràng và thân thiện với người mới bắt đầu như hướng dẫn.

Giờ chúng ta đã kiểm thử một script Python, có thể chuyển sang các ngôn ngữ lập trình khác như JavaScript hoặc SQL. Điều này sẽ giúp chúng ta khám phá thêm khả năng của Llama 3.3 về lập luận, viết mã và hỗ trợ đa ngôn ngữ.

Kiểm thử 2: Hàm giai thừa trong Javascript

Trong bài kiểm thử này, chúng ta sẽ đánh giá mức độ xử lý một hàm JavaScript và tạo phần giải thích bằng tiếng Pháp của ứng dụng giải thích mã đa ngôn ngữ.

Chúng ta dùng đoạn mã JavaScript sau, trong đó tôi cố tình chọn tên biến gây mơ hồ để xem mô hình xử lý tốt đến đâu:

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);Được hỗ trợ bởi

Đoạn mã này định nghĩa một hàm đệ quy x(a) tính giai thừa của số a cho trước. Điều kiện cơ sở kiểm tra nếu a === 1. Nếu đúng, trả về 1. Nếu không, hàm tự gọi với a - 1 và nhân kết quả với a. Hằng số y được đặt là 6, nên hàm x tính 6×5×4×3×2×1. Cuối cùng, kết quả được lưu trong biến z và hiển thị bằng console.log. Đây là đầu ra và bản dịch sang tiếng Anh:

Lưu ý: Bạn có thể thấy phản hồi như bị cắt đột ngột, nhưng đó là do chúng ta giới hạn đầu ra ở 500 token!

Sau khi dịch, tôi kết luận rằng phần giải thích xác định đúng rằng hàm x(a) là đệ quy. Nó phân tích cách đệ quy hoạt động, giải thích trường hợp cơ sở (a === 1) và trường hợp đệ quy (a * x(a - 1)). Phần giải thích chỉ rõ cách hàm tính giai thừa của 6 và nêu vai trò của y (giá trị đầu vào) và z (kết quả). Nó cũng đề cập cách dùng console.log để hiển thị kết quả.

Phần giải thích hoàn toàn bằng tiếng Pháp như yêu cầu. Các thuật ngữ kỹ thuật như “récursive” (đệ quy), “factorielle” (giai thừa) và “produit” (tích) được dùng chính xác. Không chỉ vậy, nó nhận ra rằng đoạn mã này tính giai thừa của một số theo cách đệ quy.

Phần giải thích tránh biệt ngữ quá kỹ thuật và đơn giản hóa khái niệm đệ quy, giúp độc giả mới làm quen với lập trình dễ tiếp cận.

Bài kiểm thử này cho thấy Llama 3.3:

• Giải thích chính xác mã JavaScript có sử dụng đệ quy.
• Tạo phần giải thích rõ ràng và chi tiết bằng tiếng Pháp.
• Điều chỉnh phần giải thích để bao gồm vai trò của biến và hành vi của mã.

Giờ chúng ta đã kiểm thử ứng dụng với Python và JavaScript, hãy tiếp tục với một truy vấn SQL để đánh giá thêm khả năng đa ngôn ngữ và lập luận của nó.

Kiểm thử 3: Truy vấn SQL bằng tiếng Đức

Trong bài kiểm thử cuối cùng này, chúng ta sẽ đánh giá cách Ứng dụng giải thích mã đa ngôn ngữ xử lý một truy vấn SQL và tạo phần giải thích bằng tiếng Đức. Đây là đoạn SQL được dùng:

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;Được hỗ trợ bởi

Truy vấn này chọn cột id và tính tổng giá trị (SUM(b.value)) cho mỗi id. Nó đọc dữ liệu từ hai bảng: table_x (bí danh a) và table_y (bí danh b). Sau đó sử dụng điều kiện JOIN để nối các dòng nơi a.ref_id = b.ref. Nó lọc các dòng có b.flag = 1 và nhóm dữ liệu theo a.id. Mệnh đề HAVING lọc các nhóm chỉ giữ lại những nhóm có tổng b.value lớn hơn 1000. Cuối cùng, sắp xếp kết quả theo total_amount giảm dần.

Sau khi nhấn nút tạo phần giải thích, đây là những gì chúng ta nhận được:

Phần giải thích được tạo ngắn gọn, chính xác và có cấu trúc tốt. Mỗi mệnh đề SQL quan trọng (SELECT, FROM, JOIN, WHERE, GROUP BY, HAVING và ORDER BY) đều được giải thích rõ ràng. Ngoài ra, mô tả phù hợp với thứ tự thực thi trong SQL, giúp người đọc theo dõi logic truy vấn từng bước.

Phần giải thích hoàn toàn bằng tiếng Đức như yêu cầu.

Các thuật ngữ SQL chủ chốt (ví dụ: "filtert", "gruppiert", "sortiert") được dùng chính xác theo ngữ cảnh. Phần giải thích xác định rằng HAVING dùng để lọc kết quả sau khi nhóm, điều này thường gây nhầm lẫn cho người mới bắt đầu. Nó cũng giải thích việc dùng bí danh (AS) để đổi tên bảng và cột cho rõ ràng.

Phần giải thích tránh thuật ngữ quá phức tạp và tập trung vào chức năng của từng mệnh đề. Điều này giúp người mới bắt đầu dễ hiểu cách truy vấn hoạt động.

Bài kiểm thử này cho thấy Llama 3.3:

• Xử lý truy vấn SQL hiệu quả.
• Tạo phần giải thích theo từng mệnh đề rõ ràng và có cấu trúc.
• Hỗ trợ tiếng Đức làm ngôn ngữ đầu ra.
• Cung cấp đủ chi tiết để giúp người mới bắt đầu hiểu logic đằng sau các truy vấn SQL.

Chúng ta đã kiểm thử ứng dụng với các đoạn mã bằng Python, JavaScript và SQL, tạo phần giải thích bằng tiếng Tây Ban Nha, Pháp và Đức. Trong mọi bài kiểm thử:

• Các phần giải thích đều chính xác, rõ ràng và chi tiết.
• Mô hình thể hiện kỹ năng lập luận mạnh mẽ và hỗ trợ đa ngôn ngữ.

Với bài kiểm thử này, chúng ta đã xác nhận ứng dụng vừa xây dựng là linh hoạt, đáng tin cậy và hiệu quả trong việc giải thích mã trên nhiều ngôn ngữ lập trình và ngôn ngữ tự nhiên.

Kết luận

Chúc mừng! Bạn đã xây dựng thành công một trợ lý giải thích mã đa ngôn ngữ bằng Streamlit và Llama 3.3 từ Hugging Face.

Trong hướng dẫn này, bạn đã học:

1. Cách tích hợp các mô hình Hugging Face vào ứng dụng Streamlit.
2. Cách dùng API Llama 3.3 để giải thích các đoạn mã.
3. Cách làm sạch phản hồi API và tạo một ứng dụng thân thiện với người dùng.

Dự án này là điểm khởi đầu tuyệt vời để khám phá khả năng của Llama 3.3 trong lập luận về mã, hỗ trợ đa ngôn ngữ và nội dung hướng dẫn. Hãy thoải mái tạo ứng dụng của riêng bạn để tiếp tục khám phá các tính năng mạnh mẽ của mô hình này!