feat: add state check for updates and implement daisyUI

app/models.go

@@ -8,16 +8,20 @@ import (
 
 	"jenn-ai/internal/bedrock"
 	"jenn-ai/internal/ollama"
+	"jenn-ai/internal/state"
 
 	"github.com/gin-gonic/gin"
 )
 
-var modelID string
-
 func getModelsByPlatform(ctx context.Context, region string) gin.HandlerFunc {
 	return func(c *gin.Context) {
+		platform := c.Query("platform-option")
+		appState := state.GetState()
+		appState.SetPlatform(platform)
+
 		var models string
 		var modelList []string
+
 		switch platform {
 		case "Bedrock":
 			client, err := bedrock.CreateBedrockClient(ctx, region)
@@ -43,19 +47,17 @@ func getModelsByPlatform(ctx context.Context, region string) gin.HandlerFunc {
 		default:
 			fmt.Println("No Model Platform selected")
 		}
+
+		models = "<option disabled selected>Select Model</option>"
 		for _, m := range modelList {
-			models += fmt.Sprintf(`<a href="#" 
-      data-value="%s"
-      hx-post="/select-model?option=%s" 
-      class="model-item block px-4 py-2 text-sm text-black-700 hover:bg-blue-400">
-      %s</a>`, m, m, m)
+			models += fmt.Sprintf("<option>%s</option>", m)
 		}
 		c.Data(http.StatusOK, "text/html", []byte(models))
 	}
 }
 
 func selectModel(c *gin.Context) {
-	selectedOption := c.Query("option")
-	fmt.Printf("Received the following: %s\n", selectedOption)
-	modelID = selectedOption
+	model := c.PostForm("model-option")
+	appState := state.GetState()
+	appState.SetModel(model)
 }

app/platform.go

@@ -9,23 +9,12 @@ import (
 	"github.com/gin-gonic/gin"
 )
 
-var platform string
-
 func getModelPlatform(c *gin.Context) {
-	var modelPlatform string
-
+	modelPlatform := "<option disabled selected>Model Platform</option>"
 	for _, plat := range fuzzy.ModelSource {
-		modelPlatform += fmt.Sprintf(`<a href="#" 
-      data-value="%s"
-      hx-post="/select-platform?option=%s" 
-      class="platform-item block px-4 py-2 text-sm text-black-700 hover:bg-blue-400">
-      %s</a>`, plat, plat, plat)
+		modelPlatform += fmt.Sprintf("<option>%s</option>", plat)
 	}
 	c.Data(http.StatusOK, "text/html", []byte(modelPlatform))
-}
-
-func setModelPlatform(c *gin.Context) {
-	selectedOption := c.Query("option")
+	selectedOption := c.PostForm("platform-option")
 	fmt.Printf("Received the following: %s\n", selectedOption)
-	platform = selectedOption
 }

app/run.go

@@ -10,13 +10,18 @@ import (
 	"jenn-ai/internal/bedrock"
 	"jenn-ai/internal/ollama"
 	"jenn-ai/internal/parser"
+	"jenn-ai/internal/state"
 
 	"github.com/gin-gonic/gin"
 )
 
-func (mc *ModelConfig) runModel(ctx context.Context, region string) gin.HandlerFunc {
+func (mc *ModelConfig) runModel(ctx context.Context) gin.HandlerFunc {
 	return func(c *gin.Context) {
+		appState := state.GetState()
+		platform := appState.GetPlatform()
+		modelID := appState.GetModel()
 		message := c.PostForm("prompt")
+
 		switch platform {
 		case "Bedrock":
 			brClient, err := bedrock.CreateBedrockruntimeClient(ctx, mc.Region)

app/server.go

@@ -40,11 +40,11 @@ func (mc *ModelConfig) Serve(ctx context.Context) {
 	router.LoadHTMLGlob("templates/*")
 
 	router.GET("/", renderIndex)
+	router.GET("/current-state", getCurrentState)
 	router.GET("/model-platform", getModelPlatform)
-	router.POST("/select-platform", setModelPlatform)
 	router.GET("/model", getModelsByPlatform(ctx, mc.Region))
 	router.POST("/select-model", selectModel)
-	router.POST("/run", mc.runModel(ctx, mc.Region))
+	router.POST("/run", mc.runModel(ctx))
 
 	if err := router.Run(":31000"); err != nil {
 		log.Fatal(err)

app/state.go

@@ -0,0 +1,17 @@
+package app
+
+import (
+	"net/http"
+
+	"jenn-ai/internal/state"
+
+	"github.com/gin-gonic/gin"
+)
+
+func getCurrentState(c *gin.Context) {
+	appState := state.GetState()
+	c.JSON(http.StatusOK, gin.H{
+		"platform": appState.GetPlatform(),
+		"model":    appState.GetModel(),
+	})
+}

internal/state/state.go

@@ -0,0 +1,47 @@
+package state
+
+import (
+	"sync"
+)
+
+type AppState struct {
+	mu       sync.RWMutex
+	platform string
+	model    string
+}
+
+var (
+	state *AppState
+	once  sync.Once
+)
+
+func GetState() *AppState {
+	once.Do(func() {
+		state = &AppState{}
+	})
+	return state
+}
+
+func (s *AppState) SetPlatform(platform string) {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	s.platform = platform
+}
+
+func (s *AppState) GetPlatform() string {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	return s.platform
+}
+
+func (s *AppState) SetModel(model string) {
+	s.mu.Lock()
+	defer s.mu.Unlock()
+	s.model = model
+}
+
+func (s *AppState) GetModel() string {
+	s.mu.RLock()
+	defer s.mu.RUnlock()
+	return s.model
+}

templates/dropdowns.html

@@ -1,64 +1,41 @@
 {{define "dropdowns.html"}}
-<div class="flex justify-left">
-  <div class="pr-2">
-    <button 
-      id="platform-trigger"
+<div class="flex flex-row items-center space-x-4">
+  <form id="platform-model-form"
+    class="flex-grow flex flex-row space-x-2"
+    hx-post="/select-model"
+    hx-trigger="change from:#model-select"
+    hx-target="#current-state"
+  >
+    <select 
+      name="platform-option" 
+      class="select select-ghost w-full max-w-xs"
       hx-get="/model-platform"
-      hx-trigger="click"
-      hx-target="#platform-container"
-      class="bg-blue-500 hover:bg-blue-700 py-2 px-2 rounded"
-    >Model Platform</button>
-    <div 
-      id="platform-container"
-      class="hidden mt-2 py-2 w-48 bg-black rounded-md shadow-xl z-20"
-    ></div>
-  </div>
-  <div class="pr-2">
-    <button 
-      id="model-trigger"
+      hx-trigger="load"
+      hx-target="this"
+      hx-on::after-request="htmx.trigger('#model-select', 'reset')"
+    >
+      <option disabled selected value="">Model Platform</option>
+    </select>
+
+    <select 
+      id="model-select"
+      name="model-option" 
+      class="select select-ghost w-full max-w-xs"
       hx-get="/model"
-      hx-trigger="click"
-      hx-target="#model-container"
-      class="bg-blue-500 hover:bg-blue-700 py-2 px-2 rounded"
-    >Model</button>
-    <div 
-      id="model-container"
-      class="hidden mt-2 py-2 w-48 bg-black rounded-md shadow-xl z-20"
-    ></div>
+      hx-trigger="reset, change from:select[name='platform-option']"
+      hx-target="this"
+      hx-include="[name='platform-option']"
+    >
+      <option disabled selected value="">Select Model</option>
+    </select>
+  </form>
+  <div 
+    id="current-state"
+    hx-get="/current-state"
+    hx-trigger="load, every 5s"
+    class="badge badge-accent badge-outline"
+  >
+    <!-- This will be populated with the current state -->
   </div>
-  <div id="selected-platform" class="mt-2 p-2"></div>
-  <div id="selected-model" class="mt-2 p-2"></div>
 </div>
-
-<script>
-const container = document.getElementById('platform-container');
-const selectedItemPlaceholder = document.getElementById('selected-platform');
-const modelContainer = document.getElementById('model-container');
-const selectedModel = document.getElementById('selected-model');
-
-document.addEventListener('click', function (e) {
-  if (e.target.matches('#platform-trigger')) {
-    // Toggle dropdown visibility
-    container.classList.toggle('hidden');
-  }
-  if (e.target.matches('.platform-item')) {
-    const selection = e.target.getAttribute('data-value');
-    selectedItemPlaceholder.textContent = `${selection}:`;
-    // Toggle dropdown visibility
-    container.classList.toggle('hidden');
-    e.preventDefault();
-  }
-  if (e.target.matches('#model-trigger')) {
-    // Toggle dropdown visibility
-    modelContainer.classList.toggle('hidden');
-  }
-  if (e.target.matches('.model-item')) {
-    const selection = e.target.getAttribute('data-value');
-    selectedModel.textContent = `${selection}`;
-    // Toggle dropdown visibility
-    modelContainer.classList.toggle('hidden');
-    e.preventDefault();
-  }
-});
-</script>
 {{end}}

templates/index.html

@@ -3,6 +3,7 @@
 <html lang="en">
   <head>
     <title>JennAI</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css" />
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/[email protected]"
       integrity="sha384-EAzY246d6BpbWR7sQ8+WEm40J8c3dHFsqC58IgPlh4kMbRRI6P6WA+LA/qGAyAu8"
@@ -17,10 +18,23 @@
   </head>
   <body class="bg-gray-900">
     <div class="bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 p-4">
-      <p style="font-size: 24px; text-align: center;">{{.Message}}</p>
-      <div class="pl-40">
-        {{template "dropdowns.html" .}}
+        <div class="flex w-full">
+          <div class="card bg-base-300 rounded-box grid h-20 flex-grow place-items-center">
+            <p style="font-size: 24px; text-align: center;">{{.Message}}</p>
+            <div class="pl-40">
+              {{template "dropdowns.html" .}}
+            </div>
+          </div>
+          <div class="card bg-base-300 rounded-box grid h-20 flex-grow place-items-center">
+            <label class="flex cursor-pointer gap-2">
+              <span class="label-text">Current</span>
+              <input type="checkbox" value="synthwave" class="toggle theme-controller" />
+              <span class="label-text">Synthwave</span>
+            </label>
+          </div>
+        </div>
       </div>
+
     </div>
 
     <div id="htmlOutput" class="flex flex-col flex-grow pl-40 pr-40 mb-20">