Hugging Face's logo

Spaces:
ashrith-2013
/
deepseekmodel
Running

App Files Community
deepseekmodel
File size: 4,778 Bytes
330e00e
 
 
 
 
3062c89
330e00e
3062c89
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
330e00e
 
 
 
3062c89
330e00e
 
 
 
 
 
 
 
3062c89
 
 
 
30f1f55
 
3062c89
 
 
 
330e00e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Model AI Hub</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Include the official Hugging Face Inference Library -->
    <script type="module">
        import { HfInference } from 'https://cdn.jsdelivr.net/npm/@huggingface/inference@2.8.1/+esm'

        const tokenInput = document.getElementById('hfToken');
        const modelSelect = document.getElementById('modelSelect');
        const promptInput = document.getElementById('promptInput');
        const runButton = document.getElementById('runBtn');
        const outputDiv = document.getElementById('outputWindow');

        runButton.addEventListener('click', async () => {
            const token = tokenInput.value.trim();
            const model = modelSelect.value;
            const prompt = promptInput.value.trim();

            if (!token || !prompt) {
                alert('Please enter your token and a prompt.');
                return;
            }

            runButton.disabled = true;
            runButton.innerText = "Thinking...";
            outputDiv.innerText = "Querying Hugging Face Serverless API...";

            try {
                // Initialize the official client helper
                const hf = new HfInference(token);

                // Call the text generation API via the official SDK wrapper
                const response = await hf.textGeneration({
                    model: model,
                    inputs: prompt,
                    parameters: {
                        max_new_tokens: 256,
                        return_full_text: false
                    }
                });

                if (response && response.generated_text) {
                    outputDiv.innerText = response.generated_text;
                } else {
                    outputDiv.innerText = JSON.stringify(response, null, 2);
                }

            } catch (error) {
                outputDiv.innerText = `API Error: ${error.message}\n\nTip: If it says 'Model is loading', wait 20 seconds and press Send again while the Hugging Face servers wake up the weights!`;
            } finally {
                runButton.disabled = false;
                runButton.innerText = "Send Request";
            }
        });
    </script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col items-center justify-center p-4">

    <div class="w-full max-w-2xl bg-gray-800 p-6 rounded-xl shadow-md border border-gray-700">
        <h1 class="text-2xl font-bold mb-4 text-center text-blue-400">Multi-Model AI Hub</h1>
        
        <!-- Key Input -->
        <div class="mb-4">
            <label class="block text-sm font-semibold mb-1 text-gray-400">Your Hugging Face Token:</label>
            <input type="password" id="hfToken" placeholder="Paste your hf_... key here" 
                   class="w-full p-2.5 rounded bg-gray-700 border border-gray-600 text-white focus:outline-none focus:border-blue-500">
        </div>

        <!-- Model Dropdown Menu -->
        <div class="mb-4">
            <label class="block text-sm font-semibold mb-1 text-gray-400">Choose Model:</label>
            <select id="modelSelect" class="w-full p-2.5 rounded bg-gray-700 border border-gray-600 text-white focus:outline-none focus:border-blue-500">
                <option value="google/gemma-4-12b-unified">Gemma 4 (12B Unified Text/Vision/Audio)</option>
                <option value="google/gemma-4-31b">Gemma 4 (31B Frontier Dense)</option>
                <option value="deepseek-ai/DeepSeek-R1-Distill-Qwen-8B">DeepSeek R1 (Distill Qwen 8B)</option>
            </select>
        </div>

        <!-- Prompt Textarea -->
        <div class="mb-4">
            <label class="block text-sm font-semibold mb-1 text-gray-400">Prompt:</label>
            <textarea id="promptInput" rows="4" placeholder="Type your prompt here..." 
                      class="w-full p-2.5 rounded bg-gray-700 border border-gray-600 text-white focus:outline-none focus:border-blue-500"></textarea>
        </div>

        <!-- Execution Button -->
        <button id="runBtn" class="w-full bg-blue-600 hover:bg-blue-700 font-bold py-2.5 px-4 rounded transition">
            Send Request
        </button>

        <!-- Response Window -->
        <div class="mt-6">
            <label class="block text-sm font-semibold mb-1 text-gray-400">Model Output:</label>
            <div id="outputWindow" class="w-full p-3 rounded bg-gray-950 border border-gray-800 min-h-[100px] whitespace-pre-wrap text-gray-300">
                Waiting for input...
            </div>
        </div>
    </div>

</body>
</html>