Hugging Face's logo

Spaces:
sharktide
/
chat
Running

App Files Community
chat
File size: 11,376 Bytes
5383ef0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b22d21
 
 
 
 
5383ef0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b22d21
 
 
 
 
 
 
 
5383ef0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b22d21
5383ef0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b22d21
5383ef0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4b22d21
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>InferencePort AI</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="/css/tokens.css" />
  <link rel="stylesheet" href="/css/base.css" />
  <link rel="stylesheet" href="/css/sidebar.css" />
  <link rel="stylesheet" href="/css/chat.css" />
  <link rel="stylesheet" href="/css/modals.css" />
  <link rel="stylesheet" href="/css/input.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
</head>
<body>
  <!-- Share import overlay -->
  <div id="share-import-banner" class="share-banner hidden">
    <div class="share-banner-inner">
      <span class="share-icon">🔗</span>
      <span id="share-banner-text">Importing shared session…</span>
      <button id="share-import-btn" class="btn-primary">Import Session</button>
      <button id="share-dismiss-btn" class="btn-ghost">Dismiss</button>
    </div>
  </div>

  <div id="app">
    <!-- Sidebar -->
    <aside id="sidebar" class="sidebar collapsed">
      <div class="sidebar-top">
        <button id="new-chat-btn" class="sidebar-icon-btn" title="New Chat">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
        </button>
        <button id="toggle-sidebar-btn" class="sidebar-icon-btn" title="Toggle sidebar">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
        </button>
      </div>

      <div class="sidebar-sessions" id="sidebar-sessions">
        <div class="session-list" id="session-list"></div>
      </div>

      <div class="sidebar-bottom" id="sidebar-bottom">
        <!-- Shown when not signed in -->
        <div id="guest-section" class="account-section">
          <!-- Collapsed: icon-only sign-in button -->
          <button id="signin-icon-btn" class="btn-signin-icon" title="Sign In">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
          </button>
          <!-- Expanded: full sign-in button -->
          <button id="signin-btn" class="btn-signin">Sign In</button>
          <button id="settings-btn-guest" class="sidebar-icon-btn" title="Settings">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </button>
        </div>

        <!-- Shown when signed in -->
        <div id="user-section" class="account-section hidden">
          <button id="user-profile-btn" class="user-profile-btn">
            <div class="user-avatar" id="user-avatar">?</div>
            <div class="user-info">
              <span class="user-name" id="user-name-display">—</span>
              <span class="user-plan" id="user-plan-display">Free</span>
            </div>
          </button>
          <button id="settings-btn" class="sidebar-icon-btn" title="Settings">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
          </button>
        </div>
      </div>
    </aside>

    <!-- Main chat area -->
    <main id="main">
      <!-- Welcome / new chat state -->
      <div id="welcome-view" class="welcome-view">
        <h1 class="welcome-title">What's on your mind?</h1>
        <div class="welcome-input-wrap">
          <div class="center-input-container">
            <div id="center-file-preview-row" class="input-file-preview-row"></div>
            <div class="center-input-row">
              <div class="attach-btn-wrap">
                <button id="center-attach-btn" class="attach-btn" title="Attach">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                </button>
              </div>
              <textarea id="center-input" class="center-textarea" placeholder="Ask anything…" rows="1"></textarea>
            <div class="center-input-actions">
              <button id="center-tool-search" class="tool-btn" data-tool="webSearch" title="Web Search">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
              </button>
              <button id="center-tool-image" class="tool-btn" data-tool="imageGen" title="Image">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
              </button>
              <button id="center-tool-video" class="tool-btn" data-tool="videoGen" title="Video">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
              </button>
              <button id="center-tool-audio" class="tool-btn" data-tool="audioGen" title="Audio">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
              </button>
              <button id="center-send-btn" class="send-btn-center">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21L23 12 2 3v7l15 2-15 2v7z"/></svg>
              </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Active chat view -->
      <div id="chat-view" class="chat-view hidden">
        <div id="chat-messages" class="chat-messages"></div>
      </div>

      <!-- Bottom input (active during chat) -->
      <div id="bottom-input-bar" class="bottom-input-bar hidden">
        <div class="bottom-input-wrap">
          <button id="bottom-attach-btn" class="attach-btn-bottom" title="Attach">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </button>
          <div class="bottom-textarea-wrap">
            <div class="tool-row">
              <button class="tool-btn-sm active" data-tool="webSearch" title="Web Search">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                <span>Search</span>
              </button>
              <button class="tool-btn-sm" data-tool="imageGen" title="Image">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                <span>Image</span>
              </button>
              <button class="tool-btn-sm" data-tool="videoGen" title="Video">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
                <span>Video</span>
              </button>
              <button class="tool-btn-sm" data-tool="audioGen" title="Audio">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
                <span>Audio</span>
              </button>
            </div>
            <div id="file-preview-row" class="input-file-preview-row"></div>
            <textarea id="bottom-input" class="bottom-textarea" placeholder="Ask anything…" rows="1"></textarea>
          </div>
          <button id="bottom-send-btn" class="send-btn-bottom">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M2 21L23 12 2 3v7l15 2-15 2v7z"/></svg>
          </button>
        </div>
      </div>
    </main>
  </div>

  <!-- Context Menus -->
  <div id="session-context-menu" class="context-menu hidden"></div>
  <div id="user-context-menu" class="context-menu hidden"></div>
  <div id="attach-context-menu" class="context-menu hidden"></div>

  <!-- Modals -->
  <div id="modal-overlay" class="modal-overlay hidden">
    <div id="modal-box" class="modal-box"></div>
  </div>

  <!-- Notification area -->
  <div id="notifications" class="notifications"></div>

  <!-- Hidden file input -->
  <input type="file" id="file-input" multiple style="display:none" />
  <input type="file" id="image-input" accept="image/*" multiple style="display:none" />

  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/marked@9.1.6/marked.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
  <script type="module" src="/js/app.js"></script>
</body>
</html>