default max_thread; Frontend Node Resizer 👋

backend/src/demo/demo.py

@@ -4,7 +4,7 @@ import sys
 sys.path.insert(0, "../resources")
 from module import GradioModule, register, InterLauncher, tabularGradio
 sys.path.insert(0, "../example")
-from examples import Pictionary, FSD, stock_forecast
+# from examples import Pictionary, FSD, stock_forecast
 
 import gradio as gr
 
@@ -43,9 +43,9 @@ elif args.examples == "load":
     demo = gr.Interface.load("models/EleutherAI/gpt-neo-1.3B", description=description, examples=examples)
     InterLauncher("Demo", demo) if args.listen == None else InterLauncher("Demo", demo, listen=args.listen)
 
-elif args.examples == "FSD": FSD().launch() if args.listen == None else FSD().launch(listen=args.listen)
+# elif args.examples == "FSD": FSD().launch() if args.listen == None else FSD().launch(listen=args.listen)
 
-elif args.examples == "Stonk" : stock_forecast().launch() if args.listen == None else stock_forecast().launch(listen=args.listen)
+# elif args.examples == "Stonk" : stock_forecast().launch() if args.listen == None else stock_forecast().launch(listen=args.listen)
 
-else:
-    Pictionary("../example/data/labels.txt", "../example/data/pytorch_model.bin").launch(live=True)  if args.listen == None else Pictionary("../example/data/labels.txt", "../example/data/pytorch_model.bin").launch(live=True, listen=args.listen)
+# else:
+    # Pictionary("../example/data/labels.txt", "../example/data/pytorch_model.bin").launch(live=True)  if args.listen == None else Pictionary("../example/data/labels.txt", "../example/data/pytorch_model.bin").launch(live=True, listen=args.listen)

backend/src/resources/module.py

@@ -78,7 +78,7 @@ def InterLauncher(name, interface, listen=2000, **kwargs):
                      share=kwargs['share'] if "share" in kwargs else None,
                      debug=kwargs['debug'] if "debug" in kwargs else False,
                      enable_queue=kwargs['enable_queue'] if "enable_queue" in kwargs else None,
-                     max_threads=kwargs['max_threads'] if "max_threads" in kwargs else None,
+                     max_threads=kwargs['max_threads'] if "max_threads" in kwargs else 40,
                      auth=kwargs['auth'] if "auth" in kwargs else None,
                      auth_message=kwargs['auth_message'] if "auth_message" in kwargs else None,
                      prevent_thread_lock=kwargs['prevent_thread_lock'] if "prevent_thread_lock" in kwargs else False,
@@ -131,7 +131,7 @@ def tabularGradio(funcs, names=[], name="Tabular Temp Name", **kwargs):
                                             share=kwargs['share'] if "share" in kwargs else None,
                                             debug=kwargs['debug'] if "debug" in kwargs else False,
                                             enable_queue=kwargs['enable_queue'] if "enable_queue" in kwargs else None,
-                                            max_threads=kwargs['max_threads'] if "max_threads" in kwargs else None,
+                                            max_threads=kwargs['max_threads'] if "max_threads" in kwargs else 40,
                                             auth=kwargs['auth'] if "auth" in kwargs else None,
                                             auth_message=kwargs['auth_message'] if "auth_message" in kwargs else None,
                                             prevent_thread_lock=kwargs['prevent_thread_lock'] if "prevent_thread_lock" in kwargs else False,
@@ -315,14 +315,14 @@ def GradioModule(cls):
                 except Exception:
                     print(f"**{bcolor.BOLD}{bcolor.FAIL}CONNECTION ERROR{bcolor.ENDC}** 🐛The listening api is either not up or you choose the wrong port.🐛")
                     return
-
+            print(port)
             self.interface.launch(server_port=port,
-                                  server_name=f"{DOCKER_LOCAL_HOST}",
+                                  server_name=DOCKER_LOCAL_HOST,
                                   inline= kwargs['inline'] if "inline" in kwargs else None,
                                   share=kwargs['share'] if "share" in kwargs else None,
                                   debug=kwargs['debug'] if "debug" in kwargs else False,
                                   enable_queue=kwargs['enable_queue'] if "enable_queue" in kwargs else None,
-                                  max_threads=kwargs['max_threads'] if "max_threads" in kwargs else None,
+                                  max_threads=kwargs['max_threads'] if "max_threads" in kwargs else 40,
                                   auth=kwargs['auth'] if "auth" in kwargs else None,
                                   auth_message=kwargs['auth_message'] if "auth_message" in kwargs else None,
                                   prevent_thread_lock=kwargs['prevent_thread_lock'] if "prevent_thread_lock" in kwargs else False,

frontend/package.json

@@ -10,12 +10,14 @@
     "@types/node": "^18.7.13",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@use-gesture/react": "^10.2.20",
     "axios": "^0.27.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-flow-renderer": "^10.3.8",
     "react-icons": "^4.4.0",
     "react-scripts": "5.0.1",
+    "react-spring": "^9.5.5",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.1.3",
     "typescript": "^4.8.2",

frontend/src/components/Nodes/Custom.js

@@ -1,206 +1,99 @@
-import React from "react"
-import { Handle, Position } from "react-flow-renderer"
+import React, { useCallback, useEffect, useRef, useState } from "react"
+// import { Handle, Position } from "react-flow-renderer"
 import {TbResize} from 'react-icons/tb'
 import {BiCube, BiRefresh} from 'react-icons/bi'
-import {BsTrash, BsArrowDownRightSquare} from 'react-icons/bs'
+import {BsTrash} from 'react-icons/bs'
 import {CgLayoutGridSmall} from 'react-icons/cg'
+import {useDrag} from '@use-gesture/react'
+import { useSpring, animated } from 'react-spring'
+
 import '../../css/counter.css'
 
 const MINIMUM_HEIGHT = 600;
 const MINIMUM_WIDTH = 540; 
-export default class CustomNodeIframe extends React.Component {
-    constructor({id , data}){
-      super()
-      this.myRef = React.createRef()
-      this.original_width = 0;
-      this.original_height = 0;
-      this.original_x = 0;
-      this.original_y = 0;
-      this.original_mouse_x = 0;
-      this.original_mouse_y = 0;
-      this.state = {
-        id : id,
-        reachable : this.isFetchable(data.host),
-        selected : false,
-        data : data,
-        width : 540,
-        height : 600,
-        size : false,
-        iframe : 0,
-      }
- 
-    }
-
-    handelSelected = () => {
-      this.setState(prevState => ({'selected' : !prevState.selected, 'size' : false }))
-    }
-
-    handelSizeState = () => {
-        this.setState(prevState => ({'size' : !prevState.size}))
-      }
-
-    isFetchable = async (host) => {
 
-      fetch(host, {mode: 'no-cors'}).then((re) => {
+export default function CustomNodeIframe({id, data}){
+    const [collapsed, setCollapsible] = useState(true)
+    const [{width, height}, api] = useSpring(() => ({width: MINIMUM_WIDTH, height: MINIMUM_HEIGHT }))
+    const [sizeAdjuster, setSizeAdjuster] = useState(false)
+    const [reachable ,setReachable] = useState(false)
+    const [refresh, setRefresh] = useState(0)
+    const dragElement = useRef()
+
+    const bind = useDrag((state) => {
+      const isResizing = (state?.event.target === dragElement.current);
+      if (isResizing) {
+        api.set({
+          width: state.offset[0],
+          height: state.offset[1],
+
+        });
+      } 
+    }, {
+      from: (event) => {
+        const isResizing = (event.target === dragElement.current);
+        if (isResizing) {
+          return [width.get(), height.get()];
+        } 
+      },
+    });
+
+    const isFetchable =useCallback(async () => {
+      return fetch(data.host, {mode: 'no-cors'}).then((res) => {
         return true
       }).catch((err)=>{
         return false
       })
-      return false
-    }
-
-
-    onNodeClick = (id) => {
-      this.state.data.delete(id)
-    }
-
-    onRefresh(){
-      if(!this.isFetchable(this.state.data.host)){ 
-        this.onNodeClick(this.state.id)
-      } else{
-        this.setState(prevState => ({'iframe' : prevState.iframe + 1}))
-      }
-    }
-
-    handelOnChange(evt, type){
-      this.setState({[`${type}`] : parseInt(evt.target.value) })
-      type === "width" ? this.myRef.current.style.width = `${parseInt(evt.target.value)}px` : this.myRef.current.style.height = `${parseInt(evt.target.value)}px` 
-    }
-
-    handelSize(evt, increment, change){
-      if (evt === "increment") {
-        this.setState({[`${change}`] :  change === "width" ? this.state.width + increment : this.state.height + increment })
-        change === "width" ? this.myRef.current.style.width = `${this.state.width + increment}px` : this.myRef.current.style.height = `${this.state.height + increment}px` 
-      }
-
-    }
-    
-    //resize nodes by dragging
-    initial = (e) => {
-      this.original_width = this.myRef.current.offsetWidth
-      this.original_height = this.myRef.current.offsetHeight
-
-      this.original_x = this.myRef.current.getBoundingClientRect().left;
-      this.original_y = this.myRef.current.getBoundingClientRect().top;
-
-      this.original_mouse_x = e.clientX
-      this.original_mouse_y = e.clientY
-    }
-
-    resize = (e, point) => {
-      var height = 0;
-      var width = 0;
-      // e.dataTransfer.setDragImage(new Image(), 0, 0)
-      if (point === 'bottom-right'){
-        width = this.original_width + (e.clientX - this.original_mouse_x);
-        height = this.original_height + (e.clientY - this.original_mouse_y)
-        if (width > MINIMUM_WIDTH) {
-          this.myRef.current.style.width = `${width}px`
-          this.setState({'width' :  parseInt(width) , 'height' : parseInt(height)})
-
+    }, [data.host])
+
+    useEffect(() => {
+      const fetched = setInterval(
+        async () => {
+          const fetch = await isFetchable()
+          if (fetch){
+            setReachable(true)
+            clearInterval(fetched)
+          }
+        },1000) 
+    },[isFetchable])
+
+
+    return (
+    <div className="w-10 h-10">
+      
+      <div id={'draggable'}className=" flex w-full h-10 top-0 cursor-pointer" onClick={() => {}}>
+      <div id={'draggable'} title={collapsed ? "Collaspse Node" : "Expand Node"} className=" flex-none duration-300 cursor-pointer shadow-xl border-2 border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={() => {setCollapsible((clps) => !clps)}}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
+
+      <div className={` flex ${!collapsed ? '' : 'w-0 hidden'}`}>
+                      <div title="Adjust Node Size" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Violet rounded-xl" onClick={() => {setSizeAdjuster((size) => !size)}}><TbResize className="h-full w-full text-white p-1"/></div>
+                      <a href={data.host} target="_blank" rel="noopener noreferrer"><div title="Gradio Host Site" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Pink rounded-xl"><BiCube className="h-full w-full text-white p-1"/></div></a>
+                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => data.delete([{id : id}])}><BsTrash className="h-full w-full text-white p-1"/></div>
+                      <div title="Refresh Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Orange rounded-xl" onClick={() => {setRefresh((old) => old++)}}><BiRefresh className="h-full w-full text-white p-1"/></div>
+        </div>
+      </div>
+
+      { !collapsed && reachable && <>
+          <animated.div className={`border-dashed  ${sizeAdjuster ? 'border-4 border-white' : ''} relative top-0 left-0 z-[1000] touch-none shadow-lg rounded-xl`} style={{width, height }} {...bind()}>
+            <div id="draggable" className={`absolute h-full w-full ${data.colour} shadow-2xl rounded-xl -z-20`}></div>
+            <iframe id="iframe" 
+                        key={refresh}
+                        src={data.host} 
+                        title={data.label}
+                        frameBorder="0"
+                        className=" p-[0.6rem] -z-10 h-full w-full ml-auto mr-auto overflow-y-scroll"/>
+              <div className={` ${sizeAdjuster ? '' : 'hidden'} rounded-full border-2 absolute -bottom-4 -right-4 w-7 h-7 bg-Blue-Royal cursor-nwse-resize touch-none shadow-lg`} ref={dragElement}>
+            </div>  
+            </animated.div>
+            </>
         }
-        if (height > MINIMUM_HEIGHT) {
-          this.myRef.current.style.height = `${height}px`
-          this.setState({'width' :  parseInt(width) , 'height' : parseInt(height)})
 
+        { collapsed  &&
+              <div id={`draggable`}
+                   className={` w-[340px] h-[140px]  text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg
+                                p-5 px-2 rounded-md break-all -z-20 ${data.colour} hover:opacity-70 duration-300`} onClick={() => setCollapsible(collapsed => !collapsed)}>
+                  <div  className="absolute text-6xl opacity-60 z-10 pt-8 ">{data.emoji}</div>    
+                  <h2 className={`max-w-full font-sans text-blue-50 leading-tight font-bold text-3xl flex-1 z-20 pt-10`} style={{"textShadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{data.label}</h2>
+              </div > 
         }
-      } 
-    }
-
-    OnDragEnd = () => {
-      this.setState({'width' : parseInt(this.myRef.current.offsetWidth), 'height' : parseInt(this.myRef.current.offsetHeight)})
-    }
-
-    Counter(focus, size){
-      return (<div className="custom-number-input h-10 w-32 dark:text-white text-black ">
-                <div className="flex flex-row h-10 w-full rounded-lg relative bg-transparent">
-                  <button data-action="decrement" className=" border-2 border-dotted border-Retro-dark-blue hover:border-rose-700 rounded-l-xl hover:animate-pulse h-full w-20 cursor-pointer outline-none " onClick={(e)=> {this.handelSize("increment", -5, focus)}}>
-                    <span className="m-auto text-2xl font-bold">−</span>
-                  </button>
-                  <input type="number" className="focus:outline-none border-Retro-dark-blue border-y-2 border-dotted text-center w-full font-semibold text-md focus:from-fuchsia-200 md:text-basecursor-default flex items-cente outline-none bg-transparent" name="input-number" value={size} onChange={(e) => this.handelOnChange(e, focus)} onKeyDown={(e) => {this.handelSize(e.key, size, focus)}}></input>
-                  <button data-action="increment" className="border-2 border-dotted border-Retro-dark-blue hover:border-green-400 rounded-r-xl hover:animate-pulse h-full w-20  cursor-pointer" onClick={(e)=> {this.handelSize("increment", 5, focus)}} >
-                    <span className="m-auto text-2xl font-bold">+</span>
-                  </button>
-                </div>
-              </div>)
-    }
-        
-    render(){
-      if (!this.state.reachable) {this.onNodeClick(this.state.id) }
-      return (<>
-                  <div className=" flex w-full h-10 top-0 cursor-pointer" onClick={this.handelEvent}>
-                  <div title={this.state.selected ? "Collaspse Node" : "Expand Node"} className=" duration-300 cursor-pointer shadow-xl border-2 border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Blue rounded-xl" onClick={this.handelSelected}><CgLayoutGridSmall className="h-full w-full text-white p-1"/></div>
-
-    
-                    <div className={` flex ${this.state.selected ? '' : 'w-0 hidden'}`}>
-                      <div title="Adjust Node Size" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Violet rounded-xl" onClick={this.handelSizeState}><TbResize className="h-full w-full text-white p-1"/></div>
-                      <a href={this.state.data.host} target="_blank" rel="noopener noreferrer"><div title="Gradio Host Site" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Pink rounded-xl"><BiCube className="h-full w-full text-white p-1"/></div></a>
-                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => this.onNodeClick(this.state.id)}><BsTrash className="h-full w-full text-white p-1"/></div>
-                      <div title="Refresh Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Orange rounded-xl" onClick={() => this.onRefresh()}><BiRefresh className="h-full w-full text-white p-1"/></div>
-
-                      { this.state.size && <div className="duration-300 flex w-auto h-full  mr-2 -mt-3 space-x-4">
-                        {this.Counter("width", this.state.width)}
-                        {this.Counter("height", this.state.height)}
-                      </div>}
-                    </div>
-                  
-                  </div>               
-                
-                  <div id={`draggable`} className={`relative overflow-hidden m-0 p-0 shadow-2xl ${this.state.selected ? "w-[540px] h-[600px]" : "hidden"} duration-200`} ref={this.myRef}>
-
-                    <div className={`absolute p-5 h-full w-full ${this.state.data.colour} shadow-2xl rounded-xl -z-20`}></div>
-                                        <iframe 
-                        id="iframe" 
-                        key={this.state.iframe}
-                        src={this.state.data.host} 
-                        title={this.state.data.label}
-                        frameBorder="0"
-                        className="p-2 -z-10 h-full w-full ml-auto mr-auto overflow-y-scroll" 
-                        sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"
-                        ></iframe>
-                  </div>
-                  
-                  {/*Input*/}
-                  <Handle type="target"
-                          id="input"
-                          position={Position.Left}
-                          style={!this.state.selected ? 
-                                {"paddingRight" : "5px" , "marginTop" : "15px", "height" : "25px", "width" : "25px",  "borderRadius" : "3px", "zIndex" : "10000", "background" : "white", "boxShadow" : "3px 3px #888888"}
-                                :{"paddingRight" : "5px" ,"height" : "25px", "width" : "25px",  "borderRadius" : "3px", "zIndex" : "10000", "background" : "white", "boxShadow" : "3px 3px #888888"}}
-                          />
-                  
-                  {/*Output*/}
-                  <Handle type="source" id="output" position={Position.Right} style={ !this.state.selected ?
-                      {"paddingLeft" : "5px", "marginTop" : "15px" ,"height" : "25px", "width" : "25px",  "borderRadius" : "3px", "zIndex" : "10000", "background" : "white", "boxShadow" : "3px 3px #888888"}
-                      : {"paddingLeft" : "5px", "marginTop" : "0px" ,"height" : "25px", "width" : "25px",  "borderRadius" : "3px", "zIndex" : "10000", "background" : "white", "boxShadow" : "3px 3px #888888"}}/>
-
-                  {
-                    !this.state.selected &&
-                    <div 
-                    id={`draggable`}
-                    className={` w-[340px] h-[140px]  text-white text-md flex flex-col text-center items-center cursor-grab shadow-lg
-                                 p-5 px-2 rounded-md hover:animate-pulse break-all -z-20 ${this.state.data.colour}`}>
-
-                    <div  className="absolute text-6xl opacity-60 z-10 pt-8 ">{this.state.data.emoji}</div>    
-                    <h2 className={`max-w-full font-sans text-blue-50 leading-tight font-bold text-3xl flex-1 z-20 pt-10`} style={{"textShadow" : "0px 1px 2px rgba(0, 0, 0, 0.25)"}} >{this.state.data.label}</h2>
-                    </div >     
-                  }
-                  { this.state.size && !navigator.userAgent.match(/firefox|fxios/i)  && <>
-                  
-                  <div id="remove-ghost" className={`absolute select-none -bottom-0 right-0 w-5 h-5border-2 shadow-2xl rounded-xl z-10 cursor-nwse-resize hover:opacity-50  `}
-                       style={{"userDrag": "none"}} 
-                         draggable
-                         onDragStart={(e) => { this.initial(e) }}
-                         onDrag={(e) => { this.resize(e, 'bottom-right') }}
-                         onDragEnd={() => {this.OnDragEnd()}}
-                         >
-                          <BsArrowDownRightSquare className=" text-selected-text text-2xl bg-white"/>
-                          </div> 
-  
-                      </>
-                  }
-                
-
-        </>)
-    }
-}
+      </div>)
+}

frontend/src/css/dist/output.css

@@ -606,8 +606,12 @@ video {
   top: 2.25rem;
 }
 
-.-bottom-0 {
-  bottom: -0px;
+.-bottom-4 {
+  bottom: -1rem;
+}
+
+.-right-4 {
+  right: -1rem;
 }
 
 .top-4 {
@@ -626,6 +630,10 @@ video {
   z-index: 10;
 }
 
+.z-\[1000\] {
+  z-index: 1000;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -638,14 +646,6 @@ video {
   float: left;
 }
 
-.m-auto {
-  margin: auto;
-}
-
-.m-0 {
-  margin: 0px;
-}
-
 .mr-5 {
   margin-right: 1.25rem;
 }
@@ -742,8 +742,8 @@ video {
   height: auto;
 }
 
-.h-\[600px\] {
-  height: 600px;
+.h-7 {
+  height: 1.75rem;
 }
 
 .h-\[140px\] {
@@ -782,30 +782,18 @@ video {
   width: 75%;
 }
 
-.w-32 {
-  width: 8rem;
-}
-
 .w-0 {
   width: 0px;
 }
 
-.w-auto {
-  width: auto;
-}
-
-.w-\[540px\] {
-  width: 540px;
+.w-7 {
+  width: 1.75rem;
 }
 
 .w-\[340px\] {
   width: 340px;
 }
 
-.w-5 {
-  width: 1.25rem;
-}
-
 .w-\[41px\] {
   width: 41px;
 }
@@ -822,6 +810,10 @@ video {
   flex: 1 1 0%;
 }
 
+.flex-none {
+  flex: none;
+}
+
 .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));
@@ -850,19 +842,15 @@ video {
   cursor: default;
 }
 
+.touch-none {
+  touch-action: none;
+}
+
 .select-none {
   -webkit-user-select: none;
           user-select: none;
 }
 
-.resize {
-  resize: both;
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -879,12 +867,6 @@ video {
   justify-content: center;
 }
 
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -926,16 +908,6 @@ video {
   border-top-right-radius: 0.5rem;
 }
 
-.rounded-l-xl {
-  border-top-left-radius: 0.75rem;
-  border-bottom-left-radius: 0.75rem;
-}
-
-.rounded-r-xl {
-  border-top-right-radius: 0.75rem;
-  border-bottom-right-radius: 0.75rem;
-}
-
 .rounded-tl-lg {
   border-top-left-radius: 0.5rem;
 }
@@ -948,9 +920,8 @@ video {
   border-width: 1px;
 }
 
-.border-y-2 {
-  border-top-width: 2px;
-  border-bottom-width: 2px;
+.border-4 {
+  border-width: 4px;
 }
 
 .border-r-\[1px\] {
@@ -961,10 +932,6 @@ video {
   border-style: dashed;
 }
 
-.border-dotted {
-  border-style: dotted;
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -985,11 +952,6 @@ video {
   border-color: rgb(220 38 38 / var(--tw-border-opacity));
 }
 
-.border-Retro-dark-blue {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 94 232 / var(--tw-border-opacity));
-}
-
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1053,6 +1015,11 @@ video {
   background-color: rgb(254 169 89 / var(--tw-bg-opacity));
 }
 
+.bg-Blue-Royal {
+  --tw-bg-opacity: 1;
+  background-color: rgb(61 118 224 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1280,6 +1247,10 @@ video {
   padding: 0.25rem;
 }
 
+.p-\[0\.6rem\] {
+  padding: 0.6rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1402,11 +1373,6 @@ video {
   line-height: 2.25rem;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .text-6xl {
   font-size: 3.75rem;
   line-height: 1;
@@ -1420,10 +1386,6 @@ video {
   font-weight: 700;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .leading-tight {
   line-height: 1.25;
 }
@@ -1458,11 +1420,6 @@ video {
   color: rgb(239 246 255 / var(--tw-text-opacity));
 }
 
-.text-selected-text {
-  --tw-text-opacity: 1;
-  color: rgb(0 83 215 / var(--tw-text-opacity));
-}
-
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1496,11 +1453,6 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
 .filter {
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1572,16 +1524,6 @@ video {
   border-color: rgb(151 0 204 / var(--tw-border-opacity));
 }
 
-.hover\:border-rose-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(190 18 60 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(74 222 128 / var(--tw-border-opacity));
-}
-
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1601,10 +1543,6 @@ video {
   opacity: 0.7;
 }
 
-.hover\:opacity-50:hover {
-  opacity: 0.5;
-}
-
 .hover\:shadow-lg:hover {
   --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);
@@ -1621,12 +1559,6 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.focus\:from-fuchsia-200:focus {
-  --tw-gradient-from: #f5d0fe;
-  --tw-gradient-to: rgb(245 208 254 / 0);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
 .focus\:shadow-xl:focus {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);