fix: replace logo svg

README.md

@@ -1,6 +1,6 @@
 <h1><picture>
   <source media="(prefers-color-scheme: dark)" srcset="./logo-light.svg">
-  <img alt="LLM Playground" src="./logo.svg">
+  <img alt="LLM Playground" src="./src/assets/logo.svg">
 </picture></h1>
 
 LLM Playground is a versatile environment for experimenting with different large language models (LLMs). It facilitates basic evaluation and comparisons directly in your browser, without the need to set up projects or write code in Jupyter notebooks. This tool supports a variety of LLMs, including OpenAI models, through configurable endpoints.

package.json

@@ -12,11 +12,14 @@
   "dependencies": {
     "@lexical/react": "^0.14.5",
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "@svgr/plugin-svgo": "^8.1.0",
     "lexical": "^0.14.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.0",
-    "react-select": "^5.8.0"
+    "react-select": "^5.8.0",
+    "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",

src/App.tsx

@@ -3,8 +3,9 @@ import Chat from "./Chat.js";
 import {HistoricalBrowser} from "./components/HistoricalBrowser.tsx";
 import {HistoricalRecord} from "./HistoryContext.tsx";
 import {useState} from "react";
-import {TbHistory, TbHistoryToggle, TbMoon, TbSandbox, TbSun, TbSunMoon} from "react-icons/tb";
+import {TbHistory, TbHistoryToggle, TbMoon, TbSun, TbSunMoon} from "react-icons/tb";
 import Completions from "./Completions.tsx";
+import Logo from "./assets/Logo.svg?react";
 
 function App() {
     const [showHistory, setShowHistory] = useState(false);
@@ -31,7 +32,7 @@ function App() {
     return <div className="App flex h-screen flex-col p-3">
         <div className="navbar bg-base-100 gap-2 mb-3 shadow-md rounded-box">
             <div className="flex-1">
-                <a className="btn btn-ghost text-xl"><TbSandbox/> LLM Playground</a>
+                <Logo className="w-64" />
             </div>
             <div className="flex-none">
                 <ul className="menu menu-horizontal px-1">

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

vite.config.js

@@ -1,8 +1,16 @@
 import {defineConfig} from 'vite'
 import react from '@vitejs/plugin-react'
+import svgr from "vite-plugin-svgr";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [react()],
+    plugins: [react(), svgr({
+        svgrOptions: {
+            plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
+            svgoConfig: {
+                floatPrecision: 2,
+            },
+        },
+    })],
     base: '/static/'
 })