Skip to content

Commit dc9a5bd

Browse files
MainframeworkMainframework
authored
Add files via upload
1 parent cef688f commit dc9a5bd

File tree

7 files changed

+2976
-0
lines changed

7 files changed

+2976
-0
lines changed

‎highlight.min.js‎

Lines changed: 1244 additions & 0 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 390 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,390 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8"/>
5+
<title>HugstonOne V1.0.1 Visit hugston.com Contact [email protected]</title>
6+
7+
<!-- Main Stylesheet -->
8+
<link rel="stylesheet" href="./style.css">
9+
10+
<style>
11+
/* General Styles ───────────────────────────────────────────── */
12+
body {
13+
font-family: Arial, sans-serif;
14+
margin: 0;
15+
padding: 0;
16+
display: flex;
17+
background-color: #f4f4f9;
18+
position: relative;
19+
min-height: 100vh;
20+
}
21+
22+
#app {
23+
display: flex;
24+
width: 100%;
25+
height: 100vh;
26+
}
27+
28+
.toggle-btn {
29+
position: absolute;
30+
top: 10px;
31+
left: 10px;
32+
background: #333;
33+
color: #fff;
34+
font-size: 1.5em;
35+
padding: 4px;
36+
border: none;
37+
border-radius: 4px;
38+
cursor: pointer;
39+
z-index: 1000;
40+
}
41+
42+
/* Sidebar Styles ───────────────────────────────────────────── */
43+
#sidebar {
44+
width: 200px;
45+
background-color: #fff;
46+
padding: 20px;
47+
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
48+
transition: transform 0.3s ease;
49+
}
50+
51+
#sidebar.hidden {
52+
transform: translateX(-100%);
53+
}
54+
55+
#sidebar select,
56+
#sidebar button {
57+
width: 100%;
58+
padding: 1px;
59+
margin-top: 2px;
60+
border: 1px outset #ccc;
61+
border-radius: 4px;
62+
cursor: pointer;
63+
color: #fff;
64+
background: #006bce;
65+
}
66+
67+
#sidebar progress {
68+
width: 100%;
69+
margin-top: 8px;
70+
}
71+
72+
#loadPct,
73+
#modelStatus {
74+
color: #000;
75+
}
76+
77+
/* Main Content Styles ──────────────────────────────────────── */
78+
#main {
79+
flex-grow: 1;
80+
padding: 20px;
81+
display: flex;
82+
flex-direction: column;
83+
gap: 20px;
84+
position: relative;
85+
}
86+
87+
#chatWindow {
88+
flex-grow: 1;
89+
background-color: #fff;
90+
padding: 10px;
91+
border-radius: 4px;
92+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
93+
overflow-y: auto;
94+
}
95+
96+
.message {
97+
padding: 8px 10px;
98+
margin: 6px 0;
99+
border-radius: 6px;
100+
max-width: 90%;
101+
word-break: break-word;
102+
}
103+
104+
.message.user{
105+
background:#fff; /* plain white bubble */
106+
color:var(--text); /* same dark text you use elsewhere */
107+
align-self:flex-end;
108+
}
109+
110+
111+
112+
.message.bot {
113+
background-color: #f0f0f0;
114+
align-self: flex-start;
115+
color: #000;
116+
}
117+
118+
.message.bot.markdown pre {
119+
background: #000;
120+
color: #0f0;
121+
padding: 6px;
122+
border-radius: 4px;
123+
overflow-x: auto;
124+
line-height: 1.4;
125+
}
126+
127+
128+
129+
/* Input Area Styles ────────────────────────────────────────── */
130+
#inputArea {
131+
display: flex;
132+
gap: 10px;
133+
align-items: flex-end;
134+
position: relative;
135+
z-index: 1;
136+
}
137+
138+
#uploadFilesBtn {
139+
padding: 6px;
140+
font-size: 1em;
141+
cursor: pointer;
142+
background: #000;
143+
color: #0f0;
144+
border: none;
145+
border-radius: 4px;
146+
}
147+
148+
#promptInput {
149+
flex-grow: 1;
150+
padding: 8px;
151+
border: 1px solid #ccc;
152+
border-radius: 4px;
153+
resize: none;
154+
}
155+
156+
#promptInput::placeholder {
157+
color: #999;
158+
}
159+
160+
#sendBtn,
161+
#stopBtn,
162+
#toggleTerminalBtn {
163+
padding: 8px;
164+
border: 1px solid #ccc;
165+
border-radius: 4px;
166+
cursor: pointer;
167+
background: #fafafa;
168+
color: #333;
169+
}
170+
171+
#terminal {
172+
background-color: #000;
173+
color: #0f0;
174+
padding: 10px;
175+
border-radius: 4px;
176+
white-space: pre-wrap;
177+
font-family: monospace;
178+
font-size: 12px;
179+
overflow-y: auto;
180+
max-height: 200px;
181+
}
182+
183+
.hidden {
184+
display: none;
185+
}
186+
/* Preview Styles ────────────────────────────────────────────── */
187+
#previewContainer {
188+
position: fixed;
189+
bottom: 90px; /* sits above the advertisement bar */
190+
right: 20px; /* dial in for horizontal offset */
191+
width: 320px;
192+
height: 180px;
193+
background: #fff;
194+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
195+
border-radius: 4px;
196+
overflow: hidden;
197+
z-index: 1000;
198+
}
199+
200+
#previewContainer.minimized {
201+
width: 140px;
202+
height: 30px;
203+
}
204+
205+
#previewContainer.minimized > :not(.minimize-btn, .preview-toggle) {
206+
display: none;
207+
}
208+
209+
.minimize-btn,
210+
.preview-toggle {
211+
position: absolute;
212+
top: 5px;
213+
z-index: 1001;
214+
background: none;
215+
border: none;
216+
cursor: pointer;
217+
font-size: 1.2em;
218+
color: #333;
219+
}
220+
221+
.minimize-btn {
222+
right: 5px;
223+
}
224+
225+
.preview-toggle {
226+
right: 35px; /* sits just to the left of the minimize button */
227+
}
228+
229+
.preview-frame {
230+
width: 100%;
231+
height: 100%;
232+
border: none;
233+
border-radius: 4px;
234+
display: block;
235+
}
236+
237+
238+
/* Advertisement Bar Styles ─────────────────────────────────── */
239+
#footerLinks {
240+
text-align: center;
241+
margin-top: 10px;
242+
position: absolute;
243+
bottom: 2px;
244+
right: 100px;
245+
z-index: 100;
246+
background: #fff;
247+
padding: 2px;
248+
border-radius: 2px;
249+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
250+
}
251+
252+
#footerLinks a {
253+
color: #007bff;
254+
text-decoration: none;
255+
margin: 0 10px;
256+
}
257+
258+
#footerLinks a:hover {
259+
text-decoration: underline;
260+
}
261+
</style>
262+
</head>
263+
<body>
264+
<!-- Sidebar Toggle -->
265+
<button id="toggleSidebar" class="toggle-btn" style="position: fixed; top: 1px; left: 1px; width: 40px; height: 30px; background-color:
266+
#006bce;
267+
border: none;
268+
border-radius: 5px;
269+
cursor: pointer;
270+
z-index: 1000; ">↹</button>
271+
272+
<div id="app">
273+
<div id="sidebar">
274+
<ul id="sessionsList"></ul>
275+
<button id="newSession">New Session</button>
276+
<button id="deleteSession" disabled>Delete Session</button>
277+
278+
<h2>Model</h2>
279+
<button id="chooseLlmBtn">Choose LLM Folder…</button>
280+
<select id="modelSelect" disabled></select>
281+
<button id="loadModelBtn" disabled>Load</button>
282+
<button id="unloadModelBtn" disabled>Unload</button>
283+
284+
<progress id="loadProgress" max="100" value="0"></progress>
285+
<span id="loadPct">0%</span>
286+
<div id="modelStatus">idle</div>
287+
288+
<h2>Settings</h2>
289+
<label>Threads: <input id="threadsInput" type="number" min="1"/></label>
290+
<label>GPU Layers: <input id="gpuLayersInput" type="number" min="0"/></label>
291+
<label>Context Size: <input id="ctxSizeInput" type="number" min="1"/></label>
292+
<label>Batch Size: <input id="batchSizeInput" type="number" min="1"/></label>
293+
<label><input id="flashAttnCheckbox" type="checkbox"/> Flash Attention</label>
294+
<label><input id="useGpuCheckbox" type="checkbox"/> Use GPU</label>
295+
</div>
296+
297+
<div id="main">
298+
<div id="chatWindow"></div>
299+
300+
<div id="inputArea">
301+
<!-- Hidden file input for uploads -->
302+
<input
303+
type="file"
304+
id="fileInput"
305+
multiple
306+
accept="*/*"
307+
style="display:none;"
308+
/>
309+
<!-- Black-hole upload button -->
310+
<button id="uploadFilesBtn" title="Upload files (≤100 MB)">🕳️</button>
311+
312+
<textarea id="promptInput" placeholder="Type your prompt…"></textarea>
313+
<button id="sendBtn" disabled>Send</button>
314+
<button id="stopBtn" disabled>Stop</button>
315+
<button id="toggleTerminalBtn">Terminal</button>
316+
</div>
317+
318+
<pre id="terminal" class="hidden"></pre>
319+
320+
<!-- Preview Container -->
321+
<div id="previewContainer">
322+
<button id="minimizePreviewBtn" class="minimize-btn">−</button>
323+
<button id="togglePreviewBtn" class="preview-toggle">Expand Preview</button>
324+
<iframe id="previewFrame" class="preview-frame"></iframe>
325+
</div>
326+
327+
<!-- clickable footer links under terminal -->
328+
<div id="footerLinks">
329+
<a href="https://hugston.com" target="_blank">HugstonOne V1.0.1</a>
330+
&mdash;
331+
<a href="https://hugston.com" target="_blank">Visit hugston.com</a>
332+
&mdash;
333+
<a href="mailto:[email protected]">Contact [email protected]</a>
334+
</div>
335+
</div>
336+
</div>
337+
338+
<!-- Local Markdown parser & syntax highlighter -->
339+
<script src="./marked.min.js"></script>
340+
<script src="./highlight.min.js"></script>
341+
<script>
342+
if (window.hljs) {
343+
hljs.configure({ ignoreUnescapedHTML: true });
344+
}
345+
</script>
346+
347+
<!-- Minimize / Restore Preview Handler -->
348+
<script>
349+
document.addEventListener('DOMContentLoaded', () => {
350+
const pc = document.getElementById('previewContainer');
351+
const btn = document.getElementById('minimizePreviewBtn');
352+
const toggleBtn = document.getElementById('togglePreviewBtn');
353+
btn.addEventListener('click', () => {
354+
pc.classList.toggle('minimized');
355+
btn.textContent = pc.classList.contains('minimized') ? '□' : '−';
356+
toggleBtn.style.display = pc.classList.contains('minimized') ? 'inline-block' : 'none';
357+
});
358+
toggleBtn.addEventListener('click', () => {
359+
pc.classList.toggle('minimized');
360+
btn.textContent = pc.classList.contains('minimized') ? '□' : '−';
361+
toggleBtn.style.display = pc.classList.contains('minimized') ? 'inline-block' : 'none';
362+
});
363+
});
364+
</script>
365+
366+
<!-- Sidebar Toggle with Persistence -->
367+
<script>
368+
document.addEventListener('DOMContentLoaded', () => {
369+
const sidebar = document.getElementById('sidebar');
370+
const toggleBtn = document.getElementById('toggleSidebar');
371+
const hidden = localStorage.getItem('sidebarHidden') === 'true';
372+
if (hidden) sidebar.classList.add('hidden');
373+
toggleBtn.addEventListener('click', () => {
374+
sidebar.classList.toggle('hidden');
375+
localStorage.setItem('sidebarHidden', sidebar.classList.contains('hidden'));
376+
});
377+
});
378+
</script>
379+
380+
<!-- Visualization Libraries (All Loaded Locally) -->
381+
<script src="./libs/d3/d3.min.js"></script>
382+
<script src="./libs/chart/Chart.min.js"></script>
383+
<script src="./libs/plotly/plotly.min.js"></script>
384+
<script src="./libs/google-charts/loader.js"></script>
385+
<script src="./libs/mermaid/mermaid.min.js"></script>
386+
387+
<!-- Renderer Logic (Local) -->
388+
<script src="./renderer.js"></script>
389+
</body>
390+
</html>

0 commit comments

Comments
 (0)