make filter buttons

Signed-off-by: mudler <mudler@localai.io>
mudler · May 6, 2024 · 7e8e9bb · 7e8e9bb
1 parent 1a641b5
commit 7e8e9bb
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 deletions.
diff --git a/core/http/elements/gallery.go b/core/http/elements/gallery.go
@@ -38,7 +38,7 @@ func ErrorProgress(err string) string {
 				"tabindex":  "-1",
 				"autofocus": "",
 			},
-			elem.Text("Error"+err),
+			elem.Text("Error "+err),
 		),
 	).Render()
 }

diff --git a/core/http/views/models.html b/core/http/views/models.html
@@ -15,10 +15,43 @@ <h2 class="text-center text-3xl font-semibold text-gray-100">
                 </a></h2> 
 
             <div class="text-center font-semibold text-gray-100">
-                Filter by type:
-                <button  hx-post="/browse/search/models" class="text-blue-500" hx-target="#search-results" 
-                hx-vals='{"search": "tts"}'
+                <h2>Filter by type:</h2>
+                <button  hx-post="/browse/search/models"
+                    class="text-white-500 inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 hover:bg-gray-300 hover:shadow-gray-2"
+                    hx-target="#search-results" 
+                    hx-vals='{"search": "tts"}'
                 hx-indicator=".htmx-indicator" >TTS</button> 
+                <button  hx-post="/browse/search/models" 
+                    class="text-white-500 inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 hover:bg-gray-300 hover:shadow-gray-2"
+                    hx-target="#search-results" 
+                    hx-vals='{"search": "stablediffusion"}'
+                hx-indicator=".htmx-indicator" >Image generation</button> 
+                <button  hx-post="/browse/search/models" \
+                    class="text-white-500 inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 hover:bg-gray-300 hover:shadow-gray-2"
+                    hx-target="#search-results" 
+                    hx-vals='{"search": "llm"}'
+                hx-indicator=".htmx-indicator" >Text generation</button> 
+                <button  hx-post="/browse/search/models" 
+                    class="text-white-500 inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 hover:bg-gray-300 hover:shadow-gray-2"
+                    hx-target="#search-results" 
+                    hx-vals='{"search": "multimodal"}'
+                hx-indicator=".htmx-indicator" >Multimodal</button> 
+                <button  hx-post="/browse/search/models" 
+                    class="text-white-500 inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 hover:bg-gray-300 hover:shadow-gray-2"
+                    hx-target="#search-results" 
+                    hx-vals='{"search": "embedding"}'
+                hx-indicator=".htmx-indicator" >Embeddings</button>
+                <button  hx-post="/browse/search/models"
+                    class="text-white-500 inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 hover:bg-gray-300 hover:shadow-gray-2"
+                    hx-target="#search-results" 
+                    hx-vals='{"search": "rerank"}'
+                hx-indicator=".htmx-indicator" >Rerankers</button> 
+                <button  
+                    hx-post="/browse/search/models"
+                    class="text-white-500 inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 hover:bg-gray-300 hover:shadow-gray-2"
+                    hx-target="#search-results" 
+                    hx-vals='{"search": "whisper"}'
+                hx-indicator=".htmx-indicator" >Audio transcription</button> 
             </div>
 
             <div class="text-center text-xs font-semibold text-gray-100">

diff --git a/core/services/gallery.go b/core/services/gallery.go
@@ -90,7 +90,7 @@ func (g *GalleryService) Start(c context.Context, cl *config.BackendConfigLoader
 				if op.Delete {
 					modelConfig := &config.BackendConfig{}
 					// Galleryname is the name of the model in this case
-					dat, err := os.ReadFile(filepath.Join(g.modelPath, op.GalleryName+".yaml"))
+					dat, err := os.ReadFile(filepath.Join(g.modelPath, op.GalleryModelName+".yaml"))
 					if err != nil {
 						updateError(err)
 						continue
@@ -111,14 +111,14 @@ func (g *GalleryService) Start(c context.Context, cl *config.BackendConfigLoader
 						files = append(files, modelConfig.MMProjFileName())
 					}
 
-					err = gallery.DeleteModelFromSystem(g.modelPath, op.GalleryName, files)
+					err = gallery.DeleteModelFromSystem(g.modelPath, op.GalleryModelName, files)
 				} else {
 					// if the request contains a gallery name, we apply the gallery from the gallery list
-					if op.GalleryName != "" {
-						if strings.Contains(op.GalleryName, "@") {
-							err = gallery.InstallModelFromGallery(op.Galleries, op.GalleryName, g.modelPath, op.Req, progressCallback)
+					if op.GalleryModelName != "" {
+						if strings.Contains(op.GalleryModelName, "@") {
+							err = gallery.InstallModelFromGallery(op.Galleries, op.GalleryModelName, g.modelPath, op.Req, progressCallback)
 						} else {
-							err = gallery.InstallModelFromGalleryByName(op.Galleries, op.GalleryName, g.modelPath, op.Req, progressCallback)
+							err = gallery.InstallModelFromGalleryByName(op.Galleries, op.GalleryModelName, g.modelPath, op.Req, progressCallback)
 						}
 					} else if op.ConfigURL != "" {
 						startup.PreloadModelsConfigurations(op.ConfigURL, g.modelPath, op.ConfigURL)
@@ -148,10 +148,11 @@ func (g *GalleryService) Start(c context.Context, cl *config.BackendConfigLoader
 
 				g.UpdateStatus(op.Id,
 					&gallery.GalleryOpStatus{
-						Deletion:  op.Delete,
-						Processed: true,
-						Message:   "completed",
-						Progress:  100})
+						Deletion:         op.Delete,
+						Processed:        true,
+						GalleryModelName: op.GalleryModelName,
+						Message:          "completed",
+						Progress:         100})
 			}
 		}
 	}()

diff --git a/pkg/gallery/op.go b/pkg/gallery/op.go
@@ -1,10 +1,10 @@
 package gallery
 
 type GalleryOp struct {
-	Id          string
-	GalleryName string
-	ConfigURL   string
-	Delete      bool
+	Id               string
+	GalleryModelName string
+	ConfigURL        string
+	Delete           bool
 
 	Req       GalleryModel
 	Galleries []Gallery
@@ -19,4 +19,5 @@ type GalleryOpStatus struct {
 	Progress           float64 `json:"progress"`
 	TotalFileSize      string  `json:"file_size"`
 	DownloadedFileSize string  `json:"downloaded_size"`
+	GalleryModelName   string  `json:"gallery_model_name"`
 }
diff --git a/pkg/gallery/request.go b/pkg/gallery/request.go
@@ -1,5 +1,7 @@
 package gallery
 
+import "fmt"
+
 // GalleryModel is the struct used to represent a model in the gallery returned by the endpoint.
 // It is used to install the model by resolving the URL and downloading the files.
 // The other fields are used to override the configuration of the model.
@@ -22,3 +24,7 @@ type GalleryModel struct {
 	// Installed is used to indicate if the model is installed or not
 	Installed bool `json:"installed,omitempty" yaml:"installed,omitempty"`
 }
+
+func (m GalleryModel) ID() string {
+	return fmt.Sprintf("%s@%s", m.Gallery.Name, m.Name)
+}