UI

msveshnikov · Mar 18, 2024 · 013e9dc · 013e9dc
1 parent 9a06c63
commit 013e9dc
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 14 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
         <meta name="description" content="Chat with Gemini Pro" />
         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
         <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chilanka:300,400,500,700&display=swap" />
         <title>Allchat</title>
     </head>
     <body>

diff --git a/server/index.js b/server/index.js
@@ -4,6 +4,7 @@ import morgan from "morgan";
 import rateLimit from "express-rate-limit";
 import { getTextGemini } from "./gemini.js";
 import { getImageTitan } from "./aws.js";
+import hasPaintWord from "./paint.js";
 
 const MAX_CONTEXT_LENGTH = 4000;
 
@@ -33,7 +34,7 @@ app.post("/interact", async (req, res) => {
         const textResponse = await getTextGemini(contextPrompt, temperature);
         userInput = userInput?.toLowerCase();
         let imageResponse;
-        if (userInput.includes("paint") || userInput.includes("draw") || userInput.includes("generate")) {
+        if (hasPaintWord(userInput)) {
             imageResponse = await getImageTitan(userInput + textResponse?.trim()?.substr(0, 200));
         }
 
@@ -46,6 +47,8 @@ app.post("/interact", async (req, res) => {
     }
 });
 
-app.listen(5000);
+app.listen(5000, () => {
+    console.log(`🚀 Server started on port 5000`);
+});
 
 process.env["GOOGLE_APPLICATION_CREDENTIALS"] = "./google.json";
diff --git a/server/paint.js b/server/paint.js
@@ -0,0 +1,119 @@
+const paintingWords = [
+    // English
+    "paint",
+    "painting",
+    "draw",
+    "drawing",
+    "brush",
+    "canvas",
+    "color",
+    "palette",
+    "sketch",
+    "art",
+
+    // Mandarin Chinese
+    "画",
+    "绘画",
+    "油画",
+    "水彩",
+    "素描",
+    "画笔",
+    "画布",
+    "颜色",
+    "调色板",
+    "艺术",
+
+    // Hindi
+    "चित्र",
+    "चित्रकारी",
+    "रेखाचित्र",
+    "कैनवास",
+    "रंग",
+    "ब्रश",
+    "पैलेट",
+    "कला",
+
+    // Spanish
+    "pintar",
+    "pintura",
+    "dibujar",
+    "dibujo",
+    "pincel",
+    "lienzo",
+    "color",
+    "paleta",
+    "boceto",
+    "arte",
+
+    // Arabic
+    "رسم",
+    "لوحة",
+    "لون",
+    "فرشاة",
+    "قماش",
+    "فن",
+
+    // Bengali
+    "আঁকা",
+    "চিত্রকর্ম",
+    "রেখাচিত্র",
+    "ক্যানভাস",
+    "রঙ",
+    "ব্রাশ",
+    "প্যালেট",
+    "শিল্প",
+
+    // Russian
+    "рисовать",
+    "картина",
+    "живопись",
+    "рисунок",
+    "кисть",
+    "холст",
+    "цвет",
+    "палитра",
+    "эскиз",
+    "искусство",
+
+    // Portuguese
+    "pintar",
+    "pintura",
+    "desenhar",
+    "desenho",
+    "pincel",
+    "tela",
+    "cor",
+    "paleta",
+    "esboço",
+    "arte",
+
+    // Indonesian
+    "melukis",
+    "lukisan",
+    "gambar",
+    "kanvas",
+    "kuas",
+    "warna",
+    "palet",
+    "sketsa",
+    "seni",
+
+    // French
+    "peindre",
+    "peinture",
+    "dessin",
+    "dessiner",
+    "pinceau",
+    "toile",
+    "couleur",
+    "palette",
+    "esquisse",
+    "art",
+];
+
+function hasPaintWord(text) {
+    const lowerCaseText = text.toLowerCase();
+    return paintingWords.some((word) => lowerCaseText.includes(word));
+}
+
+export default hasPaintWord;
diff --git a/src/App.js b/src/App.js
@@ -171,16 +171,24 @@ function App() {
                 <Box flex={1} overflow="auto" padding={2} display="flex" flexDirection="column" ref={chatContainerRef}>
                     {chatHistory.map((chat, index) => (
                         <Box key={index} display="flex" flexDirection="column" marginBottom={2}>
-                            <Box alignSelf="flex-end" bgcolor="#d4edda" color="#155724" padding={1} borderRadius={2}>
+                            <Box
+                                alignSelf="flex-end"
+                                bgcolor="#d4edda"
+                                color="#155724"
+                                padding={1}
+                                style={{ fontFamily: "Chilanka, cursive" }}
+                                borderRadius={2}
+                            >
                                 {chat.user}
                             </Box>
                             <Box
                                 alignSelf="flex-start"
                                 bgcolor="#cff4fc"
                                 color="#0c5460"
                                 padding={1}
-                                borderRadius={2}
                                 marginTop={1}
+                                borderRadius={2}
+                                style={{ fontFamily: "Chilanka, cursive" }}
                             >
                                 {isModelResponding && chat.assistant === null && <CircularProgress size={20} />}
                                 {chat.assistant !== null && <ReactMarkdown>{chat.assistant}</ReactMarkdown>}

diff --git a/src/index.js b/src/index.js
@@ -2,10 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
+import { ThemeProvider } from "@mui/material";
+import theme from "./theme";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
+    <ThemeProvider theme={theme("light")}>
+        <React.StrictMode>
+            <App />
+        </React.StrictMode>
+    </ThemeProvider>
 );
diff --git a/src/theme.js b/src/theme.js
@@ -1,19 +1,18 @@
-import { red } from "@mui/material/colors";
 import { createTheme } from "@mui/material/styles";
 
 const theme = (mode) =>
     createTheme({
         palette: {
             mode: mode,
-            primary: {
-                main: "#F50057",
-            },
+            // primary: {
+            //     main: "#F50057",
+            // },
             secondary: {
                 main: "#673ab7",
             },
-            error: {
-                main: red.A400,
-            },
+        },
+        typography: {
+            fontFamily: ["Chilanka", "cursive"].join(","),
         },
     });