Spaces:

ZackBradshaw
/

chat-nface

Configuration error

App Files Files Community

LucaVivona commited on Aug 24, 2022

Commit

cbe21a9

•

1 Parent(s): 5a80237

updates 🌊

Browse files

Files changed (9) hide show

backend/src/resources/__pycache__/module.cpython-39.pyc +0 -0
frontend/package-lock.json +44 -0
frontend/package.json +1 -0
frontend/public/index.html +0 -20
frontend/src/Components/Navagation/navbar.js +3 -3
frontend/src/Components/Nodes/custom.js +9 -3
frontend/src/css/dist/output.css +146 -42
frontend/src/helper/visual.js +17 -3
frontend/tailwind.config.js +18 -0

backend/src/resources/__pycache__/module.cpython-39.pyc CHANGED Viewed

Binary files a/backend/src/resources/__pycache__/module.cpython-39.pyc and b/backend/src/resources/__pycache__/module.cpython-39.pyc differ

frontend/package-lock.json CHANGED Viewed

@@ -11,6 +11,7 @@
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-flow-renderer": "^10.3.8",
@@ -4826,6 +4827,28 @@
         "node": ">=12"
       }
     },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -20328,6 +20351,27 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
       "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA=="
     },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^0.27.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-flow-renderer": "^10.3.8",
         "node": ">=12"
       }
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.4.2.tgz",
       "integrity": "sha512-LVAaGp/wkkgYJcjmHsoKx4juT1aQvJyPcW09MLCjVTh3V2cc6PnyempiLMNH5iMdfIX/zdbjUx2KDjMLCTdPeA=="
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",

frontend/package.json CHANGED Viewed

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-flow-renderer": "^10.3.8",

     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-flow-renderer": "^10.3.8",

frontend/public/index.html CHANGED Viewed

@@ -36,26 +36,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="Gradio-Flow"></div>
-    <script>
-    var frame = document.getElementById("Iframe");
-    frame.onload = function()
-      // function execute while load the iframe
-      {
-        // set the height of the iframe as
-        // the height of the iframe content
-        frame.style.height =
-        frame.contentWindow.document.body.scrollHeight + 'px';
-        console.log(frame.contentWindow.document.body.scrollHeight)
-      // set the width of the iframe as the
-      // width of the iframe content
-      frame.style.width  =
-        frame.contentWindow.document.body.scrollWidth+'px';
-        }
-    </script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="Gradio-Flow"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

frontend/src/Components/Navagation/navbar.js CHANGED Viewed

@@ -173,8 +173,8 @@ export default class Navbar extends Component{
         }
         return(<>
                 <li key={`${item.name}-${item.port}`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)}
-                    className={` text-white text-sm flex text-center items-center cursor-pointer
-                                 p-4 px-2 mt-4 ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`} rounded-md mt-2`} draggable>
                     <span className="text-2xl font-medium ">            </span>
                     <span className={`text-base font-medium flex-1 text-left" ${this.state.open ? "" : "hidden"}`}>{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]} ${item.name}`}</span>
                 </li >
@@ -210,7 +210,7 @@ export default class Navbar extends Component{
                     Append Shared Gradio Hosts
                 </Header>
                 <Modal.Content>
-                <div className=" text-center">This feature just allows you to append other hosted applications like gradio/streamlit to have it within the Gradio Flow interface, that may not be sending its hosting location to the api or have shared links to other people's gradio application.</div>
                 <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
                 <label className="relative block w-full">
                     <span className={`absolute inset-y-0 left-0 flex items-center pl-3`}>

         }
         return(<>
                 <li key={`${item.name}-${item.port}`} onDragStart={(event) => this.onDragStart(event, 'custom', item, index)}
+                    className={` text-white text-md flex text-center items-center cursor-pointer shadow-lg
+                                 p-7 px-2 mt-4 ${ this.state.open ? `hover:animate-pulse ${this.state.colour[index] === null ? "" : this.state.colour[index]} ` : `hidden`} rounded-md mt-2`} draggable>
                     <span className="text-2xl font-medium ">            </span>
                     <span className={`text-base font-medium flex-1 text-left" ${this.state.open ? "" : "hidden"}`}>{`${this.state.emoji[index] === null ? "" : this.state.emoji[index]} ${item.name}`}</span>
                 </li >
                     Append Shared Gradio Hosts
                 </Header>
                 <Modal.Content>
+                <div className=" text-center">Host other HugginFace Models or Gradio application via shared lin</div>
                 <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
                 <label className="relative block w-full">
                     <span className={`absolute inset-y-0 left-0 flex items-center pl-3`}>

frontend/src/Components/Nodes/custom.js CHANGED Viewed

@@ -3,6 +3,7 @@ import React from "react"
   export default class CustomNodeIframe extends React.Component {
     constructor({data}){
       super()
       this.state = {
         reachable : true,
         selected : true,
@@ -22,14 +23,19 @@ import React from "react"
     render(){
       console.log(this.state.reachable)
-      var frame = document.getElementById("Iframe");
       return (
         <>
         { this.state.selected && this.state.reachable ?
                 <div className='relative h-[540px] w-[600px] overflow-hidden m-0 p-0' onClick={()=>this.handelSelected()}>
                 <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-10`}></div>
-                <iframe src={this.state.data.host} title={this.state.data.label} frameBorder={0} allowFullScreen className=" h-full w-full p-2 overflow-y-scroll"></iframe>
               </div>:
         <>
         <div className='break-words'>

   export default class CustomNodeIframe extends React.Component {
     constructor({data}){
       super()
+      this.myRef = React.createRef()
       this.state = {
         reachable : true,
         selected : true,
     render(){
       console.log(this.state.reachable)
       return (
         <>
         { this.state.selected && this.state.reachable ?
                 <div className='relative h-[540px] w-[600px] overflow-hidden m-0 p-0' onClick={()=>this.handelSelected()}>
                 <div className={`absolute h-full w-full ${this.state.data.colour} border-1shadow-2xl shadow-black rounded-xl -z-10`}></div>
+                <iframe
+                      id="iframe"
+                      ref={this.myRef}
+                      src={this.state.data.host}
+                      title={this.state.data.label}
+                      frameBorder="0" class="container h-full p-2 flex-grow space-iframe overflow-scroll " allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>
+                {/* {console.log(this.myRef.current.contentWindow)} */}
+                {/* <gradio-app space={`${this.state.data.host}/api/predict`} className="w-full h-full"></gradio-app> */}
               </div>:
         <>
         <div className='break-words'>

frontend/src/css/dist/output.css CHANGED Viewed

@@ -549,6 +549,40 @@ video {
   --tw-backdrop-sepia:  ;
 }
 .pointer-events-none {
   pointer-events: none;
 }
@@ -658,8 +692,8 @@ video {
   height: 100vh;
 }
-.h-6 {
-  height: 1.5rem;
 }
 .h-10 {
@@ -678,14 +712,6 @@ video {
   height: 100%;
 }
-.h-8 {
-  height: 2rem;
-}
-.h-9 {
-  height: 2.25rem;
-}
 .w-10 {
   width: 2.5rem;
 }
@@ -694,8 +720,8 @@ video {
   width: 100%;
 }
-.w-8 {
-  width: 2rem;
 }
 .w-\[600px\] {
@@ -706,22 +732,14 @@ video {
   width: 100vw;
 }
-.w-4 {
-  width: 1rem;
-}
-.w-6 {
-  width: 1.5rem;
-}
-.w-9 {
-  width: 2.25rem;
-}
 .flex-1 {
   flex: 1 1 0%;
 }
 .rotate-180 {
   --tw-rotate: 180deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -736,10 +754,6 @@ video {
   align-items: center;
 }
-.self-center {
-  align-self: center;
-}
 .overflow-auto {
   overflow: auto;
 }
@@ -748,8 +762,8 @@ video {
   overflow: hidden;
 }
-.overflow-y-scroll {
-  overflow-y: scroll;
 }
 .break-words {
@@ -836,9 +850,9 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-Vapor-Orange {
-  --tw-gradient-from: #f9ac53;
-  --tw-gradient-to: rgb(249 172 83 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
@@ -848,6 +862,75 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 .to-Retro-light-pink {
   --tw-gradient-to: #f6019d;
 }
@@ -864,18 +947,38 @@ video {
   --tw-gradient-to: #153cb4;
 }
-.to-Vapor-Violet {
-  --tw-gradient-to: #300350;
 }
-.p-4 {
-  padding: 1rem;
 }
 .p-5 {
   padding: 1.25rem;
 }
 .p-0 {
   padding: 0px;
 }
@@ -944,11 +1047,6 @@ video {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -987,6 +1085,12 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 .shadow-2xl {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);

   --tw-backdrop-sepia:  ;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
 .pointer-events-none {
   pointer-events: none;
 }
   height: 100vh;
 }
+.h-9 {
+  height: 2.25rem;
 }
 .h-10 {
   height: 100%;
 }
 .w-10 {
   width: 2.5rem;
 }
   width: 100%;
 }
+.w-9 {
+  width: 2.25rem;
 }
 .w-\[600px\] {
   width: 100vw;
 }
 .flex-1 {
   flex: 1 1 0%;
 }
+.flex-grow {
+  flex-grow: 1;
+}
 .rotate-180 {
   --tw-rotate: 180deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   align-items: center;
 }
 .overflow-auto {
   overflow: auto;
 }
   overflow: hidden;
 }
+.overflow-scroll {
+  overflow: scroll;
 }
 .break-words {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-indigo-500 {
+  --tw-gradient-from: #6366f1;
+  --tw-gradient-to: rgb(99 102 241 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.from-Warm-Blue {
+  --tw-gradient-from: #283AB8;
+  --tw-gradient-to: rgb(40 58 184 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-Happy-Yellow {
+  --tw-gradient-from: #FCB866;
+  --tw-gradient-to: rgb(252 184 102 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-Blue-Turquoise {
+  --tw-gradient-from: #00FEEF;
+  --tw-gradient-to: rgb(0 254 239 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-Green-Black {
+  --tw-gradient-from: #051912;
+  --tw-gradient-to: rgb(5 25 18 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.via-purple-500 {
+  --tw-gradient-to: rgb(168 85 247 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #a855f7, var(--tw-gradient-to);
+}
+.via-Warm-Pink {
+  --tw-gradient-to: rgb(241 52 132 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #F13484, var(--tw-gradient-to);
+}
+.via-Warm-Red {
+  --tw-gradient-to: rgb(255 96 93 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #FF605D, var(--tw-gradient-to);
+}
+.via-Warm-Orange {
+  --tw-gradient-to: rgb(254 169 89 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #FEA959, var(--tw-gradient-to);
+}
+.via-Happy-Tangerine {
+  --tw-gradient-to: rgb(241 160 137 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #F1A089, var(--tw-gradient-to);
+}
+.via-Happy-Light-Magenta {
+  --tw-gradient-to: rgb(207 123 198 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #CF7BC6, var(--tw-gradient-to);
+}
+.via-Happy-Indego-Purple {
+  --tw-gradient-to: rgb(148 98 233 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #9462E9, var(--tw-gradient-to);
+}
+.via-Blue-Midtone {
+  --tw-gradient-to: rgb(40 172 234 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #28ACEA, var(--tw-gradient-to);
+}
+.via-Green-Forest {
+  --tw-gradient-to: rgb(26 76 57 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), #1A4C39, var(--tw-gradient-to);
+}
 .to-Retro-light-pink {
   --tw-gradient-to: #f6019d;
 }
   --tw-gradient-to: #153cb4;
 }
+.to-pink-500 {
+  --tw-gradient-to: #ec4899;
 }
+.to-Warm-Yellow {
+  --tw-gradient-to: #FEE27A;
+}
+.to-Happy-Sea-Blue {
+  --tw-gradient-to: #5EC5D9;
+}
+.to-Blue-Royal {
+  --tw-gradient-to: #3D76E0;
+}
+.to-Green-Emerald {
+  --tw-gradient-to: #319B72;
+}
+.p-7 {
+  padding: 1.75rem;
 }
 .p-5 {
   padding: 1.25rem;
 }
+.p-4 {
+  padding: 1rem;
+}
 .p-0 {
   padding: 0px;
 }
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-2xl {
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);

frontend/src/helper/visual.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import '../css/dist/output.css'
-const emote = ['👺', '👾', '🤖', '🧠', '🦾', '🐲', '🦊', '🐵', '🦄', '🀄' ,'🌟', '🖥', '📟', '🧬', '🚀', '🌈', '🌱', '🌎']
 const colour_map = {
     0 : 'bg-gradient-to-bl from-Retro-light-blue to-Retro-light-pink',
@@ -7,10 +7,24 @@ const colour_map = {
     2 : 'bg-gradient-to-bl from-Retro-purple to-Vapor-Pink',
     3 : 'bg-gradient-to-bl from-Retro-purple to-Vapor-Blue',
     4 : 'bg-gradient-to-bl from-Retro-light-pink to-Vapor-Blue',
-    5 : 'bg-gradient-to-bl from-Vapor-Orange to-Vapor-Violet',
-    6 : 'bg-gradient-to-bl from-Vapor-Rose to-Vapor-Blue'
 }
 export const random_emoji = () =>{
     return emote[Math.floor(Math.random() * emote.length)]
 }

 import '../css/dist/output.css'
+const emote = ['👺', '👾', '🤖', '🧠', '🦾', '🦊', '🐵', '🦄', '🀄' ,'🌟', '🖥', '📟', '🧬', '🚀', '🌈', '🌱', '🌎']
 const colour_map = {
     0 : 'bg-gradient-to-bl from-Retro-light-blue to-Retro-light-pink',
     2 : 'bg-gradient-to-bl from-Retro-purple to-Vapor-Pink',
     3 : 'bg-gradient-to-bl from-Retro-purple to-Vapor-Blue',
     4 : 'bg-gradient-to-bl from-Retro-light-pink to-Vapor-Blue',
+    5 : 'bg-gradient-to-bl from-indigo-500 via-purple-500 to-pink-500',
+    6 : 'bg-gradient-to-bl from-Vapor-Rose to-Vapor-Blue',
+    7 : 'bg-gradient-to-bl from-Warm-Blue via-Warm-Pink via-Warm-Red via-Warm-Orange to-Warm-Yellow',
+    8 : 'bg-gradient-to-bl from-Happy-Yellow via-Happy-Tangerine via-Happy-Light-Magenta via-Happy-Indego-Purple via-Cool-Blue to-Happy-Sea-Blue',
+    9 : 'bg-gradient-to-bl from-Blue-Turquoise via-Blue-Midtone to-Blue-Royal',
+    10 : 'bg-gradient-to-bl from-Green-Black via-Green-Forest to-Green-Emerald'
 }
+/**
+ *
+ *  "Warm-Blue": "#283AB8",
+        "Warm-Violet" : "#8D379E",
+        "Warm-Pink" : "#F13484",
+        "Warm-Red" : "#FF605D",
+        "Warm-Orange" : "#FEA959",
+        "Warm-Yellow" : "#FEE27A",
+ */
 export const random_emoji = () =>{
     return emote[Math.floor(Math.random() * emote.length)]
 }

frontend/tailwind.config.js CHANGED Viewed

@@ -18,6 +18,24 @@ module.exports = {
         "Vapor-Orange" : "#f9ac53",
         "Vapor-Rose" : "#f62e97",
         "Vapor-Blue" : "#153cb4",
         'body' : "#17171F",
         'cream' : "#FAF9F6",
         "selected-text" : "#0053d7",

         "Vapor-Orange" : "#f9ac53",
         "Vapor-Rose" : "#f62e97",
         "Vapor-Blue" : "#153cb4",
+        "Happy-Yellow": "#FCB866",
+        "Happy-Tangerine": "#F1A089",
+        "Happy-Light-Magenta" : "#CF7BC6",
+        "Happy-Indego-Purple" : "#9462E9",
+        "Happy-Cool-Blue" : "#508EE7",
+        "Happy-Sea-Blue" : "#5EC5D9",
+        "Blue-Turquoise" : "#00FEEF",
+        "Blue-Midtone" : "#28ACEA",
+        "Blue-Royal" : "#3D76E0",
+        "Green-Black" : "#051912",
+        "Green-Forest" : "#1A4C39",
+        "Green-Emerald" : "#319B72",
+        "Warm-Blue": "#283AB8",
+        "Warm-Violet" : "#8D379E",
+        "Warm-Pink" : "#F13484",
+        "Warm-Red" : "#FF605D",
+        "Warm-Orange" : "#FEA959",
+        "Warm-Yellow" : "#FEE27A",
         'body' : "#17171F",
         'cream' : "#FAF9F6",
         "selected-text" : "#0053d7",