Skip to content

Commit bd4e08c

Browse files
FredobapaFredobapa
authored
Revise index.html for improved content and styling
Updated the title and enhanced the styling of the page. Improved the demo description and adjusted the layout for better usability.
1 parent 879523e commit bd4e08c

1 file changed

Lines changed: 165 additions & 72 deletions

File tree

‎docs/index.html‎

Lines changed: 165 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,72 +2,111 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>LABP-Stack — AI Voice Stack</title>
5+
<title>LABP-Stack — VoIP, AI & Cloud Systems</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
78
<style>
89
:root {
910
--bg: #0f172a;
1011
--panel: #020617;
1112
--accent: #38bdf8;
1213
--text: #e5e7eb;
1314
--muted: #94a3b8;
15+
--border: #1f2a44;
1416
}
17+
1518
body {
16-
font-family: Arial, sans-serif;
19+
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
1720
background: var(--bg);
1821
color: var(--text);
19-
padding: 40px;
20-
max-width: 1000px;
22+
max-width: 1100px;
2123
margin: auto;
24+
padding: 40px 24px;
25+
}
26+
27+
h1, h2, h3 {
28+
color: var(--accent);
29+
margin-top: 0;
30+
}
31+
32+
p {
33+
color: var(--muted);
34+
line-height: 1.6;
35+
}
36+
37+
.tag {
38+
display: inline-block;
39+
background: #0b1220;
40+
border: 1px solid var(--border);
41+
padding: 4px 10px;
42+
border-radius: 999px;
43+
font-size: 12px;
44+
margin-right: 6px;
45+
color: var(--muted);
2246
}
23-
h1, h2, h3 { color: var(--accent); }
24-
p { color: var(--muted); line-height: 1.6; }
47+
48+
.section {
49+
margin-top: 48px;
50+
}
51+
2552
.box {
2653
background: var(--panel);
27-
padding: 20px;
28-
margin: 20px 0;
29-
border-radius: 10px;
54+
border: 1px solid var(--border);
55+
border-radius: 12px;
56+
padding: 24px;
57+
margin-top: 20px;
3058
}
59+
3160
.grid {
3261
display: grid;
33-
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
34-
gap: 16px;
62+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
63+
gap: 20px;
3564
}
65+
3666
input, button {
37-
padding: 10px;
67+
padding: 12px;
3868
font-size: 16px;
39-
border-radius: 6px;
69+
border-radius: 8px;
4070
border: none;
4171
}
42-
input { width: 100%; }
72+
73+
input {
74+
width: 100%;
75+
}
76+
4377
button {
4478
background: var(--accent);
4579
color: #000;
80+
font-weight: 600;
4681
cursor: pointer;
47-
font-weight: bold;
82+
margin-top: 12px;
83+
}
84+
85+
button:hover {
86+
opacity: 0.9;
4887
}
49-
button:hover { opacity: 0.9; }
88+
5089
.result {
51-
margin-top: 12px;
90+
margin-top: 16px;
5291
white-space: pre-line;
92+
font-family: monospace;
5393
color: var(--text);
5494
}
55-
a { color: var(--accent); text-decoration: none; }
56-
a:hover { text-decoration: underline; }
57-
.footer {
58-
margin-top: 40px;
59-
font-size: 14px;
60-
color: var(--muted);
95+
96+
a {
97+
color: var(--accent);
98+
text-decoration: none;
6199
}
62-
.tag {
63-
display: inline-block;
64-
background: #0b1220;
65-
border: 1px solid #1f2a44;
100+
101+
a:hover {
102+
text-decoration: underline;
103+
}
104+
105+
footer {
106+
margin-top: 80px;
107+
font-size: 14px;
66108
color: var(--muted);
67-
padding: 4px 8px;
68-
border-radius: 999px;
69-
margin-right: 6px;
70-
font-size: 12px;
109+
text-align: center;
71110
}
72111
</style>
73112
</head>
@@ -77,89 +116,144 @@
77116
<!-- HERO -->
78117
<h1>LABP-Stack</h1>
79118
<p>
80-
Personal AI stack focused on voice, intent detection and real-world automation.
119+
A production-focused stack for intelligent <strong>voice and communication systems</strong>,
120+
combining <strong>VoIP</strong>, <strong>AI-based intent detection</strong>,
121+
<strong>automation workflows</strong> and <strong>cloud infrastructure</strong>.
81122
</p>
123+
82124
<div>
83-
<span class="tag">Frontend: Static (GitHub Pages)</span>
84-
<span class="tag">Backend: Node.js</span>
85-
<span class="tag">Cloud: Railway</span>
125+
<span class="tag">VoIP & Real-Time Communications</span>
126+
<span class="tag">AI & Intent Understanding</span>
127+
<span class="tag">Automation & Orchestration</span>
128+
<span class="tag">Cloud & AWS-Oriented</span>
129+
</div>
130+
131+
<!-- PHILOSOPHY -->
132+
<div class="section box">
133+
<h2>Stack Philosophy</h2>
134+
<p>
135+
LABP-Stack is not a collection of isolated demos.
136+
It is a coherent technical platform designed around real-world communication systems,
137+
where <strong>voice is the primary interface</strong>,
138+
AI acts as a <strong>decision layer</strong>,
139+
and automation orchestrates actions across cloud-hosted services.
140+
</p>
141+
<p>
142+
The focus is on practical architectures, production readiness and extensibility,
143+
rather than theoretical or chat-only AI applications.
144+
</p>
145+
</div>
146+
147+
<!-- ARCHITECTURE -->
148+
<div class="section box">
149+
<h2>Architecture Overview</h2>
150+
<pre style="color:#94a3b8; line-height:1.5;">
151+
Voice / Text Input
152+
↓
153+
AI Intent Detection
154+
↓
155+
Decision Logic
156+
↓
157+
Automation & Orchestration
158+
↓
159+
Cloud Services (AWS / PaaS)
160+
</pre>
161+
<p>
162+
This layered architecture allows the same backend logic to be reused across
163+
IVR systems, voice agents, automated workflows and future communication channels.
164+
</p>
86165
</div>
87166

88167
<!-- PROJECTS -->
89-
<div class="box">
168+
<div class="section">
90169
<h2>Projects</h2>
170+
91171
<div class="grid">
172+
173+
<div class="box">
174+
<h3>Intent Detection API</h3>
175+
<p><strong>Status:</strong> Live (Production)</p>
176+
<p>
177+
A production-ready backend API that classifies user intent in real time.
178+
Deployed as an always-on cloud service and consumed by the live frontend demo.
179+
</p>
180+
<p>
181+
Acts as the <strong>decision brain</strong> of the stack,
182+
enabling automation and intelligent routing.
183+
</p>
184+
</div>
185+
92186
<div class="box">
93-
<h3>Voice / Intent API</h3>
187+
<h3>AI Voice Gateway</h3>
188+
<p><strong>Status:</strong> Design & Proof of Concept</p>
94189
<p>
95-
A production-ready API that detects user intent from text and returns
96-
structured responses. Deployed in the cloud and consumed by this demo.
190+
A voice-first gateway architecture designed to bridge VoIP systems
191+
with AI-driven intent analysis and backend decision logic.
192+
</p>
193+
<p>
194+
Focused on IVR modernization, virtual agents and intelligent call flows.
97195
</p>
98196
</div>
197+
99198
<div class="box">
100-
<h3>RAG Knowledge Base (WIP)</h3>
199+
<h3>RAG Knowledge Assistant</h3>
200+
<p><strong>Status:</strong> Work in Progress</p>
201+
<p>
202+
A Retrieval-Augmented Generation assistant designed to provide
203+
grounded answers from structured knowledge sources.
204+
</p>
101205
<p>
102-
Retrieval-Augmented Generation system for grounded answers from
103-
documentation and internal knowledge.
206+
Intended to integrate directly with the Intent Detection API.
104207
</p>
105208
</div>
209+
106210
</div>
107211
</div>
108212

109213
<!-- LIVE DEMO -->
110-
<div class="box">
111-
<h2>Live Demo (Production)</h2>
112-
<p>Type a message and the frontend will call the backend running in Railway.</p>
214+
<div class="section box">
215+
<h2>Live Demo — Intent Detection (Production)</h2>
216+
<p>
217+
This demo calls a backend API deployed in the cloud.
218+
Type a message and see how intent detection works in real time.
219+
</p>
113220

114221
<input id="textInput" type="text" placeholder="Try: I want to know the price" />
115-
<br /><br />
116222
<button onclick="send()">Send</button>
117223

118224
<div class="result" id="result"></div>
119225
</div>
120226

121227
<!-- LINKS -->
122-
<div class="box">
228+
<div class="section box">
123229
<h2>Links</h2>
124230
<ul>
125-
<li>
126-
<a href="https://github.com/Fredobapa/LABP-Stack" target="_blank">
127-
Frontend Repository (LABP-Stack)
128-
</a>
129-
</li>
130-
<li>
131-
<a href="https://github.com/Fredobapa/labp-backend" target="_blank">
132-
Backend Repository (labp-backend)
133-
</a>
134-
</li>
135-
<li>
136-
<a href="https://labp-backend-production.up.railway.app/" target="_blank">
137-
Backend Health Check (Railway)
138-
</a>
139-
</li>
231+
<li><a href="https://github.com/Fredobapa/LABP-Stack" target="_blank">Frontend Repository (LABP-Stack)</a></li>
232+
<li><a href="https://github.com/Fredobapa/labp-backend" target="_blank">Backend Repository (Intent API)</a></li>
233+
<li><a href="https://labp-backend-production.up.railway.app/" target="_blank">Backend Health Check (Railway)</a></li>
140234
</ul>
141235
</div>
142236

143237
<!-- SCRIPT -->
144238
<script>
145239
async function send() {
146-
const text = document.getElementById("textInput").value;
240+
const input = document.getElementById("textInput");
147241
const result = document.getElementById("result");
148242

149-
if (!text) {
150-
result.innerText = "Please type something first.";
243+
if (!input.value) {
244+
result.innerText = "Please type a message first.";
151245
return;
152246
}
153247

154-
result.innerText = "Thinking...";
248+
result.innerText = "Processing...";
155249

156250
try {
157251
const response = await fetch(
158252
"https://labp-backend-production.up.railway.app/analyze",
159253
{
160254
method: "POST",
161255
headers: { "Content-Type": "application/json" },
162-
body: JSON.stringify({ text })
256+
body: JSON.stringify({ text: input.value })
163257
}
164258
);
165259

@@ -169,16 +263,15 @@ <h2>Links</h2>
169263
"Intent: " + data.intent + "\n" +
170264
"Response: " + data.response;
171265

172-
} catch (err) {
266+
} catch (error) {
173267
result.innerText = "Error contacting backend.";
174268
}
175269
}
176270
</script>
177271

178-
<div class="footer">
179-
© LABP-Stack — Live demo powered by a production backend.
180-
</div>
272+
<footer>
273+
LABP-Stack — Intelligent Voice, AI and Cloud Systems
274+
</footer>
181275

182276
</body>
183277
</html>
184-

0 commit comments

Comments
 (0)