Spaces:
Configuration error
Configuration error
| package main | |
| import ( | |
| "fmt" | |
| "html/template" | |
| "io/ioutil" | |
| "os" | |
| "github.com/microcosm-cc/bluemonday" | |
| "gopkg.in/yaml.v3" | |
| ) | |
| var modelPageTemplate string = ` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LocalAI models</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet" /> | |
| <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js"></script> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/styles/default.min.css" | |
| /> | |
| <script | |
| defer | |
| src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.8.0/build/highlight.min.js" | |
| ></script> | |
| <script | |
| defer | |
| src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" | |
| ></script> | |
| <script | |
| defer | |
| src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" | |
| ></script> | |
| <script | |
| defer | |
| src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js" | |
| ></script> | |
| <link href="/static/general.css" rel="stylesheet" /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet"> | |
| <link | |
| href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" | |
| rel="stylesheet" /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/tw-elements/css/tw-elements.min.css" /> | |
| <script src="https://cdn.tailwindcss.com/3.3.0"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| fontFamily: { | |
| sans: ["Roboto", "sans-serif"], | |
| body: ["Roboto", "sans-serif"], | |
| mono: ["ui-monospace", "monospace"], | |
| }, | |
| }, | |
| corePlugins: { | |
| preflight: false, | |
| }, | |
| }; | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> | |
| <script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200"> | |
| <div class="flex flex-col min-h-screen"> | |
| <nav class="bg-gray-800 shadow-lg"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <a href="/" class="text-white text-xl font-bold"><img src="https://github.com/mudler/LocalAI/assets/2420543/0966aa2a-166e-4f99-a3e5-6c915fc997dd" alt="LocalAI Logo" class="h-10 mr-3 border-2 border-gray-300 shadow rounded"></a> | |
| <a href="/" class="text-white text-xl font-bold">LocalAI</a> | |
| </div> | |
| <!-- Menu button for small screens --> | |
| <div class="lg:hidden"> | |
| <button id="menu-toggle" class="text-gray-400 hover:text-white focus:outline-none"> | |
| <i class="fas fa-bars fa-lg"></i> | |
| </button> | |
| </div> | |
| <!-- Navigation links --> | |
| <div class="hidden lg:flex lg:items-center lg:justify-end lg:flex-1 lg:w-0"> | |
| <a href="https://localai.io" class="text-gray-400 hover:text-white px-3 py-2 rounded" target="_blank" ><i class="fas fa-book-reader pr-2"></i> Documentation</a> | |
| </div> | |
| </div> | |
| <!-- Collapsible menu for small screens --> | |
| <div class="hidden lg:hidden" id="mobile-menu"> | |
| <div class="pt-4 pb-3 border-t border-gray-700"> | |
| <a href="https://localai.io" class="block text-gray-400 hover:text-white px-3 py-2 rounded mt-1" target="_blank" ><i class="fas fa-book-reader pr-2"></i> Documentation</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <style> | |
| .is-hidden { | |
| display: none; | |
| } | |
| </style> | |
| <div class="container mx-auto px-4 flex-grow"> | |
| <div class="models mt-12"> | |
| <h2 class="text-center text-3xl font-semibold text-gray-100"> | |
| LocalAI model gallery list </h2><br> | |
| <h2 class="text-center text-3xl font-semibold text-gray-100"> | |
| 🖼️ Available {{.AvailableModels}} models</i> <a href="https://localai.io/models/" target="_blank" > | |
| <i class="fas fa-circle-info pr-2"></i> | |
| </a></h2> | |
| <h3> | |
| Refer to the Model gallery <a href="https://localai.io/models/" target="_blank" ><i class="fas fa-circle-info pr-2"></i></a> for more information on how to use the models with LocalAI.<br> | |
| You can install models with the CLI command <code>local-ai models install <model-name></code>. or by using the WebUI. | |
| </h3> | |
| <input class="form-control appearance-none block w-full mt-5 px-3 py-2 text-base font-normal text-gray-300 pb-2 mb-5 bg-gray-800 bg-clip-padding border border-solid border-gray-600 rounded transition ease-in-out m-0 focus:text-gray-300 focus:bg-gray-900 focus:border-blue-500 focus:outline-none" type="search" | |
| id="searchbox" placeholder="Live search keyword.."> | |
| <div class="dark grid grid-cols-1 grid-rows-1 md:grid-cols-3 block rounded-lg shadow-secondary-1 dark:bg-surface-dark"> | |
| {{ range $_, $model := .Models }} | |
| <div class="box me-4 mb-2 block rounded-lg bg-white shadow-secondary-1 dark:bg-gray-800 dark:bg-surface-dark dark:text-white text-surface pb-2"> | |
| <div> | |
| {{ $icon := "https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg" }} | |
| {{ if $model.Icon }} | |
| {{ $icon = $model.Icon }} | |
| {{ end }} | |
| <div class="flex justify-center items-center"> | |
| <img data-src="{{ $icon }}" alt="{{$model.Name}}" class="rounded-t-lg max-h-48 max-w-96 object-cover mt-3 lazy"> | |
| </div> | |
| <div class="p-6 text-surface dark:text-white"> | |
| <h5 class="mb-2 text-xl font-medium leading-tight">{{$model.Name}}</h5> | |
| <p class="mb-4 text-base truncate">{{ $model.Description }}</p> | |
| </div> | |
| <div class="px-6 pt-4 pb-2"> | |
| <!-- Modal toggle --> | |
| <button data-modal-target="{{ $model.Name}}-modal" data-modal-toggle="{{ $model.Name }}-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button"> | |
| More info | |
| </button> | |
| <!-- Main modal --> | |
| <div id="{{ $model.Name}}-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"> | |
| <div class="relative p-4 w-full max-w-2xl max-h-full"> | |
| <!-- Modal content --> | |
| <div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> | |
| <!-- Modal header --> | |
| <div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600"> | |
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white"> | |
| {{ $model.Name}} | |
| </h3> | |
| <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="{{$model.Name}}-modal"> | |
| <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"> | |
| <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/> | |
| </svg> | |
| <span class="sr-only">Close modal</span> | |
| </button> | |
| </div> | |
| <!-- Modal body --> | |
| <div class="p-4 md:p-5 space-y-4"> | |
| <div class="flex justify-center items-center"> | |
| <img data-src="{{ $icon }}" alt="{{$model.Name}}" class="lazy rounded-t-lg max-h-48 max-w-96 object-cover mt-3"> | |
| </div> | |
| <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400"> | |
| {{ $model.Description }} | |
| </p> | |
| <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400"> | |
| To install the model with the CLI, run: <br> | |
| <code> local-ai models install {{$model.Name}} </code> <br> | |
| <hr> | |
| See also <a href="https://localai.io/models/" target="_blank" > | |
| Installation <i class="fas fa-circle-info pr-2"></i> | |
| </a> to see how to install models with the REST API. | |
| </p> | |
| <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400"> | |
| <ul> | |
| {{ range $_, $u := $model.URLs }} | |
| <li><a href="{{ $u }}" target=_blank><i class="fa-solid fa-link"></i> {{ $u }}</a></li> | |
| {{ end }} | |
| </ul> | |
| </p> | |
| </div> | |
| <!-- Modal footer --> | |
| <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600"> | |
| <button data-modal-hide="{{ $model.Name}}-modal" type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {{ end }} | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| var lazyLoadInstance = new LazyLoad({ | |
| // Your custom settings go here | |
| }); | |
| let cards = document.querySelectorAll('.box') | |
| function liveSearch() { | |
| let search_query = document.getElementById("searchbox").value; | |
| //Use innerText if all contents are visible | |
| //Use textContent for including hidden elements | |
| for (var i = 0; i < cards.length; i++) { | |
| if(cards[i].textContent.toLowerCase() | |
| .includes(search_query.toLowerCase())) { | |
| cards[i].classList.remove("is-hidden"); | |
| } else { | |
| cards[i].classList.add("is-hidden"); | |
| } | |
| } | |
| } | |
| //A little delay | |
| let typingTimer; | |
| let typeInterval = 500; | |
| let searchInput = document.getElementById('searchbox'); | |
| searchInput.addEventListener('keyup', () => { | |
| clearTimeout(typingTimer); | |
| typingTimer = setTimeout(liveSearch, typeInterval); | |
| }); | |
| </script> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script> | |
| </body> | |
| </html> | |
| ` | |
| type GalleryModel struct { | |
| Name string `json:"name" yaml:"name"` | |
| URLs []string `json:"urls" yaml:"urls"` | |
| Icon string `json:"icon" yaml:"icon"` | |
| Description string `json:"description" yaml:"description"` | |
| } | |
| func main() { | |
| // read the YAML file which contains the models | |
| f, err := ioutil.ReadFile(os.Args[1]) | |
| if err != nil { | |
| fmt.Println("Error reading file:", err) | |
| return | |
| } | |
| models := []*GalleryModel{} | |
| err = yaml.Unmarshal(f, &models) | |
| if err != nil { | |
| // write to stderr | |
| os.Stderr.WriteString("Error unmarshaling YAML: " + err.Error() + "\n") | |
| return | |
| } | |
| // Ensure that all arbitrary text content is sanitized before display | |
| for i, m := range models { | |
| models[i].Name = bluemonday.StrictPolicy().Sanitize(m.Name) | |
| models[i].Description = bluemonday.StrictPolicy().Sanitize(m.Description) | |
| } | |
| // render the template | |
| data := struct { | |
| Models []*GalleryModel | |
| AvailableModels int | |
| }{ | |
| Models: models, | |
| AvailableModels: len(models), | |
| } | |
| tmpl := template.Must(template.New("modelPage").Parse(modelPageTemplate)) | |
| err = tmpl.Execute(os.Stdout, data) | |
| if err != nil { | |
| fmt.Println("Error executing template:", err) | |
| return | |
| } | |
| } | |