From 99d31667f8da4fe696c8c2fb8ef30438d0c306a7 Mon Sep 17 00:00:00 2001
From: Ettore Di Giacinto <mudler@users.noreply.github.com>
Date: Sat, 15 Nov 2025 21:31:58 +0100
Subject: [PATCH] chore: do not use placeholder image (#7279)

Use font-awesome icons instead

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
---
 core/http/views/backends.html | 22 +++++++++++++++-------
 core/http/views/index.html    | 22 +++++++++++++---------
 core/http/views/models.html   | 22 +++++++++++++++-------
 3 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/core/http/views/backends.html b/core/http/views/backends.html
index 8e807b215..05f40eab9 100644
--- a/core/http/views/backends.html
+++ b/core/http/views/backends.html
@@ -171,10 +171,14 @@
                                 <tr class="hover:bg-[#38BDF8]/10 transition-colors duration-200">
                                     <!-- Icon -->
                                     <td class="px-6 py-4">
-                                        <img :src="backend.icon || 'https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg'" 
-                                             class="w-12 h-12 object-cover rounded-lg border border-[#38BDF8]/30"
-                                             loading="lazy"
-                                             :alt="backend.name">
+                                        <div class="w-12 h-12 rounded-lg border border-[#38BDF8]/30 flex items-center justify-center bg-[#101827]">
+                                            <img x-show="backend.icon"
+                                                 :src="backend.icon"
+                                                 class="w-full h-full object-cover rounded-lg"
+                                                 loading="lazy"
+                                                 :alt="backend.name">
+                                            <i x-show="!backend.icon" class="fas fa-cog text-xl text-[#8B5CF6]"></i>
+                                        </div>
                                     </td>
                                     
                                     <!-- Backend Name -->
@@ -301,9 +305,13 @@
                         <!-- Modal Body -->
                         <div class="p-4 md:p-5 space-y-4 overflow-y-auto flex-1 min-h-0">
                             <div class="flex justify-center items-center">
-                                <img :src="selectedBackend?.icon || 'https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg'" 
-                                     class="rounded-t-lg max-h-48 max-w-96 object-cover mt-3" 
-                                     loading="lazy">
+                                <div class="w-48 h-48 rounded-lg border border-gray-300 dark:border-gray-600 flex items-center justify-center bg-gray-100 dark:bg-gray-800 mt-3">
+                                    <img x-show="selectedBackend?.icon"
+                                         :src="selectedBackend?.icon"
+                                         class="rounded-lg max-h-48 max-w-96 object-cover"
+                                         loading="lazy">
+                                    <i x-show="!selectedBackend?.icon" class="fas fa-cog text-6xl text-gray-400 dark:text-gray-500"></i>
+                                </div>
                             </div>
                             <div class="text-base leading-relaxed text-gray-500 dark:text-gray-400 break-words max-w-full markdown-content" x-html="renderMarkdown(selectedBackend?.description)"></div>
                             <template x-if="selectedBackend?.tags && selectedBackend.tags.length > 0">
diff --git a/core/http/views/index.html b/core/http/views/index.html
index b92c6f2e9..4463d4c11 100644
--- a/core/http/views/index.html
+++ b/core/http/views/index.html
@@ -109,7 +109,10 @@
 
                     {{ if ne (len .Models) 0 }}
                     <div class="mt-12 pt-8 border-t border-[#38BDF8]/20">
-                        <h3 class="text-2xl font-bold text-[#E5E7EB] mb-6">Detected Model Files</h3>
+                        <h3 class="text-2xl font-bold text-[#E5E7EB] mb-6 flex items-center">
+                            <i class="fas fa-file-alt mr-2 text-[#38BDF8]"></i>
+                            Detected Model Files
+                        </h3>
                         <p class="text-[#94A3B8] mb-6">These models were found but don't have configuration files yet</p>
                         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                             {{ range .Models }}
@@ -134,7 +137,8 @@
             {{ $modelsN = add $modelsN (len .Models)}}
             <div class="mb-8 flex flex-col md:flex-row md:items-center md:justify-between">
                 <div class="mb-4 md:mb-0">
-                    <h2 class="text-3xl md:text-4xl font-bold text-[#E5E7EB] mb-2">
+                    <h2 class="text-3xl md:text-4xl font-bold text-[#E5E7EB] mb-2 flex items-center">
+                        <i class="fas fa-brain mr-3 text-[#38BDF8]"></i>
                         Installed Models
                     </h2>
                     <p class="text-[#94A3B8]">
@@ -146,7 +150,6 @@
             <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                 {{$galleryConfig:=.GalleryConfig}}
                 {{ $loadedModels := .LoadedModels }}
-                {{$noicon:="https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg"}}
                 
                 {{ range .ModelsConfig }}
                 {{ $backendCfg := . }}
@@ -156,14 +159,14 @@
                     <div class="relative p-6 border-b border-[#101827]">
                         <div class="flex items-start space-x-4">
                             <div class="relative w-16 h-16 rounded-xl overflow-hidden flex-shrink-0 bg-[#101827] flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
-                                <img {{ if and $cfg $cfg.Icon }}
-                                    src="{{$cfg.Icon}}"
-                                    {{ else }}
-                                    src="{{$noicon}}"
-                                    {{ end }}
+                                {{ if and $cfg $cfg.Icon }}
+                                <img src="{{$cfg.Icon}}"
                                     class="w-full h-full object-contain"
                                     alt="{{.Name}} icon"
                                 >
+                                {{ else }}
+                                <i class="fas fa-brain text-2xl text-[#38BDF8]"></i>
+                                {{ end }}
                                 {{ if index $loadedModels .Name }}
                                 <div class="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-[#1E293B] animate-pulse"></div>
                                 {{ end }}
@@ -293,7 +296,8 @@
         <!-- Backends Section -->
         <div class="mt-12">
             <div class="mb-8">
-                <h2 class="text-3xl md:text-4xl font-bold text-[#E5E7EB] mb-2">
+                <h2 class="text-3xl md:text-4xl font-bold text-[#E5E7EB] mb-2 flex items-center">
+                    <i class="fas fa-cogs mr-3 text-[#8B5CF6]"></i>
                     Installed Backends
                 </h2>
                 <p class="text-[#94A3B8]">
diff --git a/core/http/views/models.html b/core/http/views/models.html
index aec21df07..e1a60b5e5 100644
--- a/core/http/views/models.html
+++ b/core/http/views/models.html
@@ -210,10 +210,14 @@
                                 <tr class="hover:bg-[#38BDF8]/10 transition-colors duration-200">
                                     <!-- Icon -->
                                     <td class="px-6 py-4">
-                                        <img :src="model.icon || 'https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg'"
-                                             class="w-12 h-12 object-cover rounded-lg border border-[#38BDF8]/30"
-                                             loading="lazy"
-                                             :alt="model.name">
+                                        <div class="w-12 h-12 rounded-lg border border-[#38BDF8]/30 flex items-center justify-center bg-[#101827]">
+                                            <img x-show="model.icon"
+                                                 :src="model.icon"
+                                                 class="w-full h-full object-cover rounded-lg"
+                                                 loading="lazy"
+                                                 :alt="model.name">
+                                            <i x-show="!model.icon" class="fas fa-brain text-xl text-[#38BDF8]"></i>
+                                        </div>
                                     </td>
 
                                     <!-- Model Name -->
@@ -355,9 +359,13 @@
                         <!-- Modal Body -->
                         <div class="p-4 md:p-5 space-y-4 overflow-y-auto flex-1 min-h-0">
                             <div class="flex justify-center items-center">
-                                <img :src="selectedModel?.icon || 'https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg'"
-                                     class="lazy rounded-t-lg max-h-48 max-w-96 object-cover mt-3"
-                                     loading="lazy">
+                                <div class="w-48 h-48 rounded-lg border border-gray-300 dark:border-gray-600 flex items-center justify-center bg-gray-100 dark:bg-gray-800 mt-3">
+                                    <img x-show="selectedModel?.icon"
+                                         :src="selectedModel?.icon"
+                                         class="rounded-lg max-h-48 max-w-96 object-cover"
+                                         loading="lazy">
+                                    <i x-show="!selectedModel?.icon" class="fas fa-brain text-6xl text-gray-400 dark:text-gray-500"></i>
+                                </div>
                             </div>
                             <div class="text-base leading-relaxed text-gray-500 dark:text-gray-400 break-words max-w-full markdown-content" x-html="renderMarkdown(selectedModel?.description)"></div>
                             <hr>