Update src/App.jsx

src/App.jsx

@@ -1,20 +1,17 @@
 import React, { useState } from 'react';
 import { 
   Sparkles, Copy, Trash2, Wand2, Terminal, 
-  Palette, Zap, Check, FlaskConical, Skull, Heart, BrainCircuit, Loader2, AlertCircle
+  Palette, Zap, Check, FlaskConical, Skull, BrainCircuit, Loader2, AlertCircle, Key
 } from 'lucide-react';
-import { HfInference } from "@huggingface/inference";
+// SỬA LỖI: Dùng CDN trực tiếp để chạy được ngay trên mọi môi trường
+import { HfInference } from "https://esm.sh/@huggingface/inference";
 
-// --- CẤU HÌNH HUGGING FACE ---
-// Lưu ý: Để dùng ổn định, bạn nên tạo HF Token (Read) và dán vào đây hoặc dùng biến môi trường
-// Nếu để trống, nó sẽ dùng chế độ public (có thể bị rate limit)
-const HF_TOKEN = ""; 
-const hf = new HfInference(HF_TOKEN);
+// --- CẤU HÌNH ---
+// ⚠️ QUAN TRỌNG: Để trống dòng này khi commit lên Hugging Face để tránh lỗi lộ secret
+const DEFAULT_HF_TOKEN = ""; 
 
-// Model chuyên chat/instruct tốt
 const AI_MODEL = "HuggingFaceH4/zephyr-7b-beta"; 
 
-// --- DATABASE TỪ KHÓA (Cho chế độ Manual) ---
 const STYLES = [
   { id: 'none', label: 'None', prompt: '' },
   { id: 'anime', label: 'Anime/Manga', prompt: 'anime style, studio ghibli style, vibrant colors, makoto shinkai style, detailed background' },
@@ -43,8 +40,9 @@ const App = () => {
   const [finalPrompt, setFinalPrompt] = useState("");
   const [copied, setCopied] = useState(false);
   
-  // State mới cho chế độ AI
+  // State mới cho chế độ AI và Token
   const [useAI, setUseAI] = useState(false);
+  const [userToken, setUserToken] = useState(DEFAULT_HF_TOKEN);
   const [isLoadingAI, setIsLoadingAI] = useState(false);
   const [aiError, setAiError] = useState("");
 
@@ -64,16 +62,21 @@ const App = () => {
   const generateWithAI = async () => {
     if (!basePrompt.trim()) return;
     
+    // Kiểm tra Token nếu dùng AI Mode
+    const tokenToUse = userToken.trim() || DEFAULT_HF_TOKEN;
+    // Nếu không có token, vẫn thử gọi (có thể bị rate limit ở chế độ public)
+    
     setIsLoadingAI(true);
     setAiError("");
-    setFinalPrompt(""); // Clear cũ
+    setFinalPrompt("");
 
     try {
+      const hf = new HfInference(tokenToUse || undefined);
+
       const styleText = selectedStyle.id !== 'none' ? `Style: ${selectedStyle.label} (${selectedStyle.prompt}).` : "";
       const qualityText = addQuality ? "Ensure high quality, detailed, 8k resolution." : "";
       const customText = customTags ? `Include these elements: ${customTags}.` : "";
 
-      // Prompt kỹ thuật (System Prompt) để ép AI trả về format chuẩn SD
       const systemPrompt = `You are an expert Stable Diffusion prompt engineer. 
       Task: Rewrite the user's concept into a highly detailed, comma-separated prompt optimized for SDXL.
       Rules:
@@ -97,9 +100,7 @@ const App = () => {
         }
       });
 
-      // Làm sạch kết quả trả về
       let result = output.generated_text;
-      // Cắt bỏ phần prompt đầu vào (nếu model trả về cả input)
       if (result.includes("<|assistant|>")) {
         result = result.split("<|assistant|>")[1];
       }
@@ -108,9 +109,8 @@ const App = () => {
 
     } catch (err) {
       console.error(err);
-      setAiError("Lỗi kết nối HF API. Thử lại hoặc tắt chế độ AI.");
-      // Fallback về manual nếu lỗi
-      generateManual();
+      setAiError("Lỗi AI: " + (err.message || "Kết nối thất bại."));
+      generateManual(); // Fallback
     } finally {
       setIsLoadingAI(false);
     }
@@ -146,7 +146,7 @@ const App = () => {
   return (
     <div className="min-h-screen bg-slate-950 text-slate-200 font-sans p-4 md:p-8 selection:bg-pink-500/30">
       
-      <header className="max-w-5xl mx-auto mb-8 flex items-center justify-between border-b border-slate-800 pb-4">
+      <header className="max-w-5xl mx-auto mb-8 flex flex-col md:flex-row items-center justify-between border-b border-slate-800 pb-4 gap-4">
         <div className="flex items-center gap-3">
           <div className="bg-gradient-to-tr from-pink-500 to-purple-600 p-2.5 rounded-xl shadow-lg shadow-purple-900/20">
             <FlaskConical className="w-6 h-6 text-white" />
@@ -157,26 +157,41 @@ const App = () => {
           </div>
         </div>
         
-        {/* Toggle Mode */}
-        <button 
-          onClick={() => setUseAI(!useAI)}
-          className={`flex items-center gap-2 px-4 py-2 rounded-full border transition-all text-xs font-bold ${
-            useAI 
-            ? 'bg-purple-600/20 border-purple-500 text-purple-400 shadow-[0_0_10px_rgba(168,85,247,0.3)]' 
-            : 'bg-slate-900 border-slate-700 text-slate-400'
-          }`}
-        >
-          {useAI ? <BrainCircuit className="w-4 h-4" /> : <Wand2 className="w-4 h-4" />}
-          {useAI ? 'AI MODE: ON' : 'MANUAL MODE'}
-        </button>
+        <div className="flex items-center gap-3">
+          {/* Ô nhập Token (Ẩn nếu không dùng AI) */}
+          {useAI && (
+            <div className="relative group">
+              <input 
+                type="password" 
+                placeholder="HF Token (Optional)" 
+                value={userToken}
+                onChange={(e) => setUserToken(e.target.value)}
+                className="bg-slate-900 border border-slate-700 rounded-full px-3 py-2 text-xs w-32 focus:w-48 transition-all outline-none focus:border-purple-500"
+              />
+              <div className="absolute right-3 top-2.5 text-slate-500 pointer-events-none">
+                <Key className="w-3 h-3" />
+              </div>
+            </div>
+          )}
+
+          <button 
+            onClick={() => setUseAI(!useAI)}
+            className={`flex items-center gap-2 px-4 py-2 rounded-full border transition-all text-xs font-bold ${
+              useAI 
+              ? 'bg-purple-600/20 border-purple-500 text-purple-400 shadow-[0_0_10px_rgba(168,85,247,0.3)]' 
+              : 'bg-slate-900 border-slate-700 text-slate-400 hover:bg-slate-800'
+            }`}
+          >
+            {useAI ? <BrainCircuit className="w-4 h-4" /> : <Wand2 className="w-4 h-4" />}
+            {useAI ? 'AI MODE: ON' : 'MANUAL MODE'}
+          </button>
+        </div>
       </header>
 
       <main className="max-w-5xl mx-auto grid lg:grid-cols-2 gap-8">
         
         {/* --- LEFT: INPUTS --- */}
         <div className="space-y-6">
-          
-          {/* 1. Main Idea */}
           <div className="space-y-2">
             <label className="text-sm font-bold text-slate-300 flex items-center gap-2">
               <Sparkles className="w-4 h-4 text-yellow-400" /> Base Concept
@@ -189,7 +204,6 @@ const App = () => {
             />
           </div>
 
-          {/* 2. Custom Tags */}
           <div className="space-y-2">
             <label className="text-sm font-bold text-slate-300 flex items-center gap-2">
               <Skull className="w-4 h-4 text-red-400" /> Custom Tags / Details
@@ -203,7 +217,6 @@ const App = () => {
             />
           </div>
 
-          {/* 3. Style */}
           <div className="space-y-2">
             <label className="text-sm font-bold text-slate-300 flex items-center gap-2">
               <Palette className="w-4 h-4 text-blue-400" /> Art Style
@@ -225,7 +238,6 @@ const App = () => {
             </div>
           </div>
 
-          {/* 4. Options */}
           <div className="flex items-center gap-4 p-4 bg-slate-900/50 rounded-xl border border-slate-800">
             <div className="flex items-center gap-2 cursor-pointer" onClick={() => setAddQuality(!addQuality)}>
               <div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${addQuality ? 'bg-pink-600 border-pink-600' : 'border-slate-600 bg-slate-800'}`}>
@@ -234,13 +246,10 @@ const App = () => {
               <span className="text-xs font-medium select-none text-slate-300">Auto Quality Boost</span>
             </div>
           </div>
-
         </div>
 
         {/* --- RIGHT: OUTPUT --- */}
         <div className="flex flex-col gap-6">
-          
-          {/* Action Button */}
           <button 
             onClick={handleGenerate}
             disabled={isLoadingAI}
@@ -265,7 +274,6 @@ const App = () => {
             </div>
           )}
 
-          {/* Result Box */}
           <div className="flex-1 bg-black/40 border border-slate-800 rounded-xl p-4 flex flex-col relative group min-h-[200px]">
             <label className="text-xs font-bold text-green-400 uppercase mb-2 flex justify-between">
               <span>Final Positive Prompt {useAI && "(AI Generated)"}</span>
@@ -298,7 +306,6 @@ const App = () => {
             </div>
           </div>
 
-          {/* Negative Prompt */}
           <div className="bg-slate-900 border border-slate-800 rounded-xl p-4">
             <div className="flex items-center justify-between mb-2">
               <label className="text-xs font-bold text-red-400 uppercase">Negative Prompt</label>
@@ -325,7 +332,6 @@ const App = () => {
               className="w-full h-24 bg-slate-950 border border-slate-700 rounded-lg p-3 text-xs text-slate-400 focus:border-red-500 outline-none resize-none font-mono"
             />
           </div>
-
         </div>
       </main>
     </div>