WIP: adding pygentic.css for css spinner element; patching other components. Result objects not loading correctly and messages not stacking

src/backend/core/consts.py

@@ -1,4 +1,6 @@
-AI_MODEL = "gpt-4o"
+from backend.utils import get_val
+
+AI_MODEL = get_val("OPENAI_MODEL", "gpt-4o")
 default_system_prompt = """
 You are an advanced and intelligent AI assistant specializing in generating
 comprehensive and detailed SWOT analyses for a variety of scenarios, topics,

src/backend/core/tools.py

@@ -1,3 +1,5 @@
+from pprint import pformat
+
 import httpx
 from bs4 import BeautifulSoup as soup
 from pydantic_ai import RunContext
@@ -117,7 +119,7 @@ async def run_agent(
             f"Perform a comprehensive SWOT analysis for this product: {url}",
             deps=deps,
         )
-        logger.info(f"Agent Result: {result}")
+        logger.info(f"Agent Result: {pformat(result.data)}")
 
         if deps.update_status_func:
             await deps.update_status_func(deps.request, "Analysis Complete")

src/frontend/static/css/pygentic_ai.css

@@ -0,0 +1,31 @@
+/* Spinner Wrapper with Overlay Effect */
+.spinner-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.7); /* Light overlay effect */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 50;
+}
+
+.loader {
+  border: 4px solid rgba(0, 0, 0, 0.1); /* Light gray */
+  border-top: 4px solid #3273dc; /* Bulma primary color */
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/frontend/templates/components/main/header.html

@@ -2,6 +2,10 @@
 <meta name="viewport"
       content="width=device-width, initial-scale=1.0">
 <title>{% block title %}Pygentic AI{% endblock title %}</title>
+<link rel="icon"
+      href="{{ url_for('static', path='favicon.ico') }}"
+      id="favicon"
+      type='image/x-icon'>
 {% block head_content %}
 {% endblock head_content %}
 {% include 'components/main/style_sheets.html' %}

src/frontend/templates/components/main/style_sheets.html

@@ -1,5 +1,7 @@
 <link rel="stylesheet"
       href="{{ url_for('static', path='css/bulma.min.css') }}">
+<link rel="stylesheet"
+      href="{{ url_for('static', path='css/pygentic_ai.css') }}">
 <link rel="stylesheet"
       href="{{ url_for('static', path='css/bulma.css.map') }}">
 <link rel="stylesheet"

src/frontend/templates/components/snippets/Spinner.jinja

@@ -0,0 +1,4 @@
+<div class="spinner-wrapper is-overlay is-hidden"
+     id="spinner">
+    <div class="loader"></div>
+</div>

src/frontend/templates/components/snippets/StatusResult.jinja

@@ -1,11 +1,12 @@
 {# def
 	div_class: str,
+    header_content: str = ''
 
 #}
 
 <article class="message is-{{ div_class }}">
     <div class="message-header">
-        <p></p>
+        <p>{{ header_content }}</p>
     </div>
     <div class="message-body">
         {{ content }}

src/frontend/templates/home.html

@@ -9,6 +9,7 @@
     </div>
 </section>
 <section class="section">
+    <Spinner></Spinner>
     <div class="container">
         <h1 class="title">Search Here</h1>
         <Search form_id="swotSearch"
@@ -17,14 +18,13 @@
                 method="post">
             <div class="field mt-1 pt-1">
                 <div class="control">
-                    <button type="button"
+                    <button type="submit"
                             class="button is-success"
+                            hx-indicator='#spinner'
                             hx-on:click="
                     const [status, result] = ['#status', '#result'].map(id => document.querySelector(id));
                     status.style.display = 'block';
                     result.style.display = 'none';
-
-                    htmx.trigger('#swotSearch', 'submit')
                     ">Analyze</button>
                 </div>
             </div>
@@ -36,14 +36,14 @@
          id="status">
         <div class="box"
              id="status"
-             hx-get='/status'
+             hx-get={{ url_for('get_status') }}
              hx-trigger='load, every 1s'
              hx-swap='innerHTML'
              style="display: none">
         </div>
         <div class="box"
              id="result"
-             hx-get='/result'
+             hx-get={{ url_for('get_result') }}
              hx-trigger="load, every 1s[!this.querySelector('#result-container') || this.style.display === 'none']"
              hx-swap='innerHTML'
              hx-on:after-request="
@@ -56,12 +56,4 @@
         </div>
     </div>
 </section>
-{% endblock content %}
+{% endblock content %}
-{% block js_content %}
-<script>
-    document.body.addEventListener("htmx:configRequest", function(evt) {
-        console.log("HTMX Request Configured:", evt.detail);
-    });
-</script>
-
-{% endblock js_content %}

src/frontend/templates/result.html

@@ -1,12 +1,12 @@
 {% if result %}
-
+<section class="section"
-<section class="section">
+         id="result-container">
     <div class="container"
          id="result-container">
         <h2 class="subtitle is-2">Analysis Complete</h2>
         <div class="fixed-grid">
             <div class="grid">
-                {% for cat in results %}
+                {% for cat in result %}
                 <div class="cell">
                     <div class="content">
                         <ul>

src/frontend/templates/status.html

@@ -1,21 +1,30 @@
 {% if messages %}
-<div id="status-container"
+<section class="section"
-     class="container">
+         id="status-container">
-    {% for message in messages %}
+    <div class="container">
-    {% set is_error = message.startswith('Error:') %}
+        {% for message in messages %}
-    {% set is_loading = loop.last and not result %}
+        {% set is_error = message.startswith('Error:') %}
-    {% set is_tool_message = message.startswith('Using tool') %}
+        {% set is_loading = loop.last and not result %}
-    <div class="box">
+        {% set is_tool_message = message.startswith('Using tool') %}
-        {% set bg_color = 'danger' if is_error else ('dark' if is_loading else "info") %}
+        <div class="box">
-        {% if is_error %}
+            {% set bg_color = 'danger' if is_error else ('dark' if is_loading else
-        {% set content = message.split('body:', 1)[1] %}
+                    "info") %}
-        {% elif is_tool_message %}
+            {% if is_error %}
-        {% set content = message.split('', 2)[2].split('...', 1)[1] %}
+            {% set header_content, content = message.split('body:', 1) %}
-        {% else %}
+            {% elif is_tool_message %}
-        {% set content = message %}
+            {% set header_content, content = message.split(' ', 2)[2].split('...', 1) %}
-        {% endif %}
+            {% elif is_loading %}
-        <StatusResult div_class={{ bg_color }}>{{ message }}</StatusResult>
+            {% set content = message %}
+            {% set header_content = 'In Progress' %}
+            {% else %}
+            {% set content = message %}
+            {% set header_content = 'Complete' %}
+            {% endif %}
+            <StatusResult div_class={{ bg_color }}
+                          header_content={{ header_content }}>{{ message }}
+            </StatusResult>
+        </div>
+        {% endfor %}
     </div>
-    {% endfor %}
+</section>
-</div>
 {% endif %}