Hugging Face's logo

Spaces:
cfalk43
/
anycoder-feea4562
Running

App Files Community
anycoder-feea4562
File size: 4,457 Bytes 
ab9f226
dd1b723
 
 
272add3
 
 
 
dd1b723
 
 
272add3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
dd1b723
 
 
 
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
106
107
108
 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Browser LLM/SLM Chat - Vision & Text</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <header>
      <h1>🤖 Browser AI Chat</h1>
      <p class="subtitle">Run LLMs & Vision Models directly in your browser</p>
      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="attribution">Built with
        anycoder</a>
    </header>

    <div class="model-selector">
      <label for="model-select">Select Model:</label>
      <select id="model-select">
                <optgroup label="Vision-Language Models">
                    <option value="HuggingFaceTB/SmolVLM-256M-Instruct">SmolVLM-256M-Instruct (Vision)</option>
                    <option value="HuggingFaceTB/SmolVLM-500M-Instruct">SmolVLM-500M-Instruct (Vision)</option>
                </optgroup>
                <optgroup label="Text-Only Models">
                    <option value="HuggingFaceTB/SmolLM2-135M-Instruct">SmolLM2-135M-Instruct</option>
                    <option value="HuggingFaceTB/SmolLM2-360M-Instruct">SmolLM2-360M-Instruct</option>
                    <option value="Qwen/Qwen2.5-0.5B-Instruct">Qwen2.5-0.5B-Instruct</option>
                </optgroup>
            </select>
      <button id="load-model-btn" class="btn btn-primary">Load Model</button>
    </div>

    <div id="loading-container" class="loading-container hidden">
      <div class="loading-spinner"></div>
      <p id="loading-status">Initializing...</p>
      <div class="progress-bar-container">
        <div id="progress-bar" class="progress-bar"></div>
      </div>
      <p id="progress-text">0%</p>
    </div>

    <div id="chat-container" class="chat-container hidden">
      <div id="chat-messages" class="chat-messages">
        <div class="welcome-message">
          <p>👋 Welcome! Load a model to start chatting.</p>
          <p class="hint">Vision models can analyze images. Text models are for conversation only.</p>
        </div>
      </div>

      <div id="image-preview-container" class="image-preview-container hidden">
        <img id="image-preview" alt="Preview">
        <button id="remove-image-btn" class="remove-image-btn">×</button>
      </div>

      <div class="input-container">
        <div class="input-row">
          <input type="file" id="image-input" accept="image/*" class="hidden">
          <button id="attach-image-btn" class="btn btn-icon" title="Attach Image">
                        📷
                    </button>
          <input type="text" id="image-url-input" placeholder="Or paste image URL..." class="image-url-input">
          <button id="load-url-btn" class="btn btn-secondary">Load URL</button>
        </div>
        <div class="input-row">
          <textarea id="user-input" placeholder="Type your message..." rows="2"></textarea>
          <button id="send-btn" class="btn btn-primary" disabled>Send</button>
        </div>
      </div>

      <div class="settings-panel">
        <details>
          <summary>⚙️ Generation Settings</summary>
          <div class="settings-grid">
            <div class="setting-item">
              <label for="max-tokens">Max Tokens: <span id="max-tokens-value">256</span></label>
              <input type="range" id="max-tokens" min="32" max="1024" value="256">
            </div>
            <div class="setting-item">
              <label for="temperature">Temperature: <span id="temperature-value">0.7</span></label>
              <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7">
            </div>
            <div class="setting-item">
              <label for="top-p">Top P: <span id="top-p-value">0.9</span></label>
              <input type="range" id="top-p" min="0" max="1" step="0.05" value="0.9">
            </div>
          </div>
        </details>
      </div>
    </div>

    <div id="error-container" class="error-container hidden">
      <p id="error-message"></p>
      <button id="dismiss-error-btn" class="btn btn-secondary">Dismiss</button>
    </div>

    <footer>
      <p>Models run entirely in your browser using <a href="https://huggingface.co/docs/transformers.js"
          target="_blank">Transformers.js</a> & WebGPU</p>
    </footer>
  </div>

  <script type="module" src="index.js"></script>
</body>

</html>