LABP-Stack/docs/index.html at main · Fredobapa/LABP-Stack · GitHub

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>LABP-Stack — Voice, RTC, Automation & Applied AI Lab</title>
  <meta name="description" content="Luis Alfredo Báez Páez's evidence-first technical portfolio connecting Voice and RTC with automation and applied AI prototypes.">
  <link rel="canonical" href="https://fredobapa.github.io/LABP-Stack/">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://fredobapa.github.io/LABP-Stack/">
  <meta property="og:title" content="LABP-Stack — Voice, RTC, Automation & Applied AI Lab">
  <meta property="og:description" content="An evidence-first technical portfolio by Luis Alfredo Báez Páez: working prototypes, architecture studies, and an explicit roadmap.">
  <meta property="og:image" content="https://fredobapa.github.io/LABP-Stack/assets/labp-stack-social.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="LABP-Stack technical portfolio — Voice, RTC, Automation and Applied AI">
  <meta name="twitter:card" content="summary_large_image">
  <style>
    :root { color-scheme: dark; --bg:#0f172a; --panel:#111c33; --text:#e5e7eb; --muted:#a9b4c7; --accent:#38bdf8; --border:#283651; }
    * { box-sizing:border-box; }
    body { margin:0 auto; max-width:960px; padding:48px 24px 72px; background:var(--bg); color:var(--text); font:16px/1.65 system-ui,sans-serif; }
    h1,h2,h3 { line-height:1.25; }
    h1 { font-size:clamp(2.4rem,7vw,4.8rem); margin:.2em 0; }
    h2 { margin-top:2.5rem; }
    p,li { color:var(--muted); }
    a { color:var(--accent); }
    .eyebrow,.status { color:var(--accent); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
    .lead { font-size:1.25rem; max-width:720px; }
    .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
    .card { padding:22px; border:1px solid var(--border); border-radius:14px; background:var(--panel); }
    .card h3 { margin-top:0; }
    .notice { margin:32px 0; padding:18px 22px; border-left:4px solid var(--accent); background:var(--panel); }
    code,pre { background:#07101f; border-radius:8px; }
    pre { padding:20px; overflow:auto; color:#cad5e5; }
    input,button { width:100%; padding:12px; border:0; border-radius:8px; font:inherit; }
    button { margin-top:10px; background:var(--accent); color:#06111c; font-weight:700; cursor:pointer; }
    button:disabled { opacity:.5; cursor:not-allowed; }
    #result { min-height:2rem; white-space:pre-line; }
    footer { margin-top:64px; padding-top:24px; border-top:1px solid var(--border); color:var(--muted); }
  </style>
</head>
<body>
  <header>
    <p class="eyebrow">Personal technical portfolio</p>
    <h1>LABP-Stack</h1>
    <p class="lead">A hands-on lab connecting a foundation in voice and real-time communications with growing work in automation and applied AI.</p>
    <p><strong>Luis Alfredo Báez Páez</strong><br>Technical Infrastructure & Communications Leader</p>
  </header>

  <div class="notice">
    <strong>Evidence-first status:</strong> this portfolio contains a static site, small tested simulators, a keyword-based API prototype, and clearly labeled design studies. It is not a production platform or commercial service offering.
  </div>

  <h2>Current work</h2>
  <div class="grid">
    <article class="card">
      <p class="status">Prototype · deployed demo</p>
      <h3>Intent API</h3>
      <p>Node.js/Express endpoint using deterministic keyword rules for <code>PRICING</code>, <code>GREETING</code>, and <code>UNKNOWN</code>. It includes request IDs and structured console logs; it does not use an AI model.</p>
      <a href="https://github.com/Fredobapa/labp-backend">Inspect backend code</a>
    </article>
    <article class="card">
      <p class="status">Implemented · tested simulator</p>
      <h3>Voice AI Gateway</h3>
      <p>A reproducible Node.js decision layer that classifies transcript events and returns explicit queue, workflow, or clarification actions. Live ARI and audio are not included.</p>
      <a href="voice-ai-gateway.html">Open project case study</a>
    </article>
    <article class="card">
      <p class="status">Implemented · credential-free simulation</p>
      <h3>Change Request Automation</h3>
      <p>An importable n8n workflow validates fictional change requests, routes them to human review, prepares committee summaries, and records structured outcomes without external credentials.</p>
      <a href="change-request-automation.html">Open automation case study</a>
    </article>
    <article class="card">
      <p class="status">Planned</p>
      <h3>RAG experiment</h3>
      <p>Concept scope only. No ingestion, embeddings, vector store, retrieval, generation, or evaluation code is currently committed.</p>
      <a href="https://github.com/Fredobapa/LABP-Stack/tree/main/projects/rag-knowledge-base">Read planned scope</a>
    </article>
  </div>

  <h2>Current architecture</h2>
  <pre>Browser text input
      -> POST /analyze
      -> Express API
      -> keyword rules
      -> JSON intent and response</pre>
  <p>AWS, live Asterisk/SBC integration, speech-to-text, and RAG remain roadmap or design-study items. The published n8n artifact is an isolated simulation, not a production integration.</p>

  <section class="card">
    <h2>API demo</h2>
    <p id="availability">Checking the prototype backend…</p>
    <input id="textInput" type="text" placeholder="Try: I want to know the price" disabled>
    <button id="sendButton" type="button" disabled>Analyze</button>
    <p id="result" aria-live="polite"></p>
  </section>

  <h2>Next milestones</h2>
  <ul>
    <li>Keep the backend API contract and automated tests aligned with the deployed prototype.</li>
    <li>Document deployment limits and operational observations from the hosted demo.</li>
    <li>Add an isolated ARI adapter to the tested Voice AI Gateway decision layer.</li>
    <li>Capture a local n8n execution of the credential-free change-request simulation.</li>
    <li>Implement and evaluate a small RAG experiment before describing it as a working component.</li>
  </ul>

  <h2>Source and design notes</h2>
  <ul>
    <li><a href="https://github.com/Fredobapa/LABP-Stack">LABP-Stack repository</a></li>
    <li><a href="https://github.com/Fredobapa/labp-backend">Backend repository</a></li>
    <li><a href="aws/aws-blueprint.html">AWS deployment design study</a></li>
  </ul>

  <footer>Personal work by Luis Alfredo Báez Páez. Not an employer, client, consulting, or production deployment claim.</footer>

  <script>
    const endpoint = "https://labp-backend-production.up.railway.app";
    const input = document.getElementById("textInput");
    const button = document.getElementById("sendButton");
    const availability = document.getElementById("availability");
    const result = document.getElementById("result");

    async function checkBackend() {
      try {
        const response = await fetch(endpoint + "/");
        if (!response.ok) throw new Error("Unavailable");
        availability.textContent = "Prototype backend available.";
        input.disabled = false;
        button.disabled = false;
      } catch {
        availability.textContent = "Prototype backend currently unavailable. The source code remains available for local review.";
      }
    }

    async function analyze() {
      if (!input.value.trim()) { result.textContent = "Enter a short message."; return; }
      button.disabled = true;
      result.textContent = "Processing…";
      try {
        const response = await fetch(endpoint + "/analyze", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ text: input.value })
        });
        if (!response.ok) throw new Error("Unavailable");
        const data = await response.json();
        result.textContent = `Intent: ${data.intent}\nResponse: ${data.response}`;
      } catch {
        result.textContent = "Prototype backend currently unavailable.";
      } finally {
        button.disabled = false;
      }
    }

    button.addEventListener("click", analyze);
    checkBackend();
  </script>
</body>
</html>