merge

frontend/src/components/Modal/importer.js

@@ -10,12 +10,12 @@ export default function Import(props){
     const [tab, setTab] = useState("gradio")
     const [subTab, setSubTab] = useState(0)
     
-    
     return (<div>
         <Modal
             basic
+            className=''
             open={props.open}
-            size='larg'
+            size='fullscreen'
             >
                 <div className='w-full shadow-lg rounded-lg'>
                     <ul className="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-100 rounded-t-lg border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
@@ -29,8 +29,8 @@ export default function Import(props){
                     <div className='absolute right-5 top-5 z-20 mr-5'
                          onClick={()=>{props.quitHandeler(false)}}>
                         <button type="button"
-                                className=" bg-neutral-300 rounded-2xl p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-300 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
-                        <Exit className="w-[20px] h-[20px]"/>
+                                className=" bg-neutral-300 rounded-2xl p-2 inline-flex items-center justify-center dark:bg-neutral-700 hover:opacity-70 focus:outline-none">
+                        <Exit className=" w-[20px] h-[20px] text-gray-400 dark:text-white"/>
                         </button>
                     </div> 
                 </div>
@@ -118,7 +118,7 @@ function Shared(props){
                                 <span className={`absolute inset-y-0 left-0 flex items-center pl-8`}>
                                     <BsSearch className="block float-left cursor-pointer text-gray-500"/>
                                 </span>
-                                <input className={`placeholder:italic placeholder:text-slate-400 text-black block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
+                                <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`}  
                                     placeholder={`URL`}
                                     type="text" name="search"
                                     onChange={(e) => {
@@ -137,12 +137,12 @@ function Shared(props){
                                 </div>
                             </div>
                         </div>}
-                        <div className={`flex items-center rounded-md bg-light-white mt-6  border-dashed`}>
+                        <div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6  border-dashed`}>
                     <label className="relative block p-5 w-full focus:shadow-xl">
                         <span className={`absolute inset-y-0 left-0 flex items-center pl-7`}>
                             <Icon className=" text-gray-500 block float-left cursor-pointer mr-2" name="address card"/>
                         </span>
-                        <input className={`placeholder:italic placeholder:text-slate-400 text-black block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
+                        <input className={`placeholder:italic placeholder:text-slate-400 text-black dark:text-white block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 pr-3 focus:shadow-xl focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
                             placeholder={`Name` }
                             type="text" name="search"
                             autoComplete='off'
@@ -155,7 +155,7 @@ function Shared(props){
                     <div className=' right-0 ml-5'>
                         <button className="relative inline-flex justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-sans font-bold text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800"
                                 onClick={()=>{props.appendHandler()}}>
-                            <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
+                            <span className="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-[#1b1c1d] rounded-md group-hover:bg-opacity-0">
                                 Enter
                             </span>
                         </button>

frontend/src/components/Navagation/navbar.js

@@ -213,8 +213,88 @@ export default class Navbar extends Component{
                         quitHandeler={this.handelModal}
                         textHandler={this.updateText}
                         appendHandler={this.append_gradio}
+<<<<<<< HEAD
                         catch={this.state.error}/>
                 
+=======
+                        catch={this.state.error}
+                        theme={this.theme}/>
+                {/* <Modal
+                    basic
+                    open={this.state.modal}
+                    size='small'
+                >
+                <Header className="select-none space-y-4" icon>
+                    🌐 
+                    <br/>
+                    Append Shared Gradio Hosts 
+                </Header>
+                <Modal.Content>
+                <div className=" text-center select-none">Host other HugginFace Models or Gradio application via shared link</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`}>
+                        <BsSearch className="block float-left cursor-pointer mr-2"/>
+                    </span>
+                    <input className={`placeholder:italic placeholder:text-slate-400 block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 ${this.state.open ? "pr-3" : "hidden"} shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 sm:text-sm bg-transparent`} 
+                           placeholder={`stream link...`}
+                           type="text" name="search"
+                           onChange={(e) => {
+                            this.updateText(e, "text")
+                           }}
+                        
+                           />
+                </label>
+                </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`}>
+                        <Icon className="block float-left cursor-pointer mr-2" name="address card"/>
+                    </span>
+                    <input className={`placeholder:italic placeholder:text-slate-400 block bg-transparent w-full border border-slate-300 border-dashed rounded-md py-2 pl-9 ${this.state.open ? "pr-3" : "hidden"} shadow-sm focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1  sm:text-sm`} 
+                           placeholder={`Give it name...` }
+                           type="text" name="search"
+                           onChange={(e) => {
+                            this.updateText(e, "name")
+                           }}
+                           autoComplete='off'
+                           />
+                </label>
+                </div>
+
+                { this.state.error &&
+                <Message negative>
+                <Message.Header className=" text-lg text-center">🚫 Something went wrong...</Message.Header>
+                    <br/>
+                    <h1 className=" underline pb-3 font-bold text-lg">🤔 Possible Things That could of happen <br/></h1>
+                    <ul className="font-bold">
+                            <li key={"error_1"}>- The input was empty</li>
+                            <li key={"error_2"}>- The connection was forbidden</li>
+                            <li key={"error_3"}>- The name was already taken</li>
+                            <li key={"error_4"}>- The link you gave did not pass the regex</li>
+                            <ul className="px-6">
+                                <li key={"error_5"}>- http://localhost:xxxx</li>
+                                <li key={"error_6"}>- http://xxxxx.gradio.app</li>
+                                <li key={"error_7"}>- https://hf.space/embed/$user/$space_name/+</li>
+                            </ul>
+                            <li>- link already exist within the menu</li>
+                        </ul>
+
+                </Message>
+                }
+
+                </Modal.Content>
+                    <Modal.Actions>
+                        <Button basic color='red' inverted onClick={() => {this.handelModal(false)}}>
+                        <Icon name='remove' /> Exit
+                        </Button>
+                        <Button color='green' inverted onClick={() => {this.append_gradio()}}>
+                        <Icon name='checkmark' /> Append
+                        </Button>
+                    </Modal.Actions>                    
+                </Modal> */}
+
+>>>>>>> origin/main
                 <div className=" relative z-10 h-auto overflow-auto pt-4">
                     <ul className="pt-2">
                     {this.state.menu.map((menu, index) => {return this.subComponents(menu, index)})}

frontend/src/css/dist/output.css

@@ -583,6 +583,10 @@ video {
   }
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .visible {
   visibility: visible;
 }
@@ -616,36 +620,64 @@ video {
   left: 0px;
 }
 
-.top-0 {
-  top: 0px;
+.-right-3 {
+  right: -0.75rem;
+}
+
+.top-9 {
+  top: 2.25rem;
 }
 
 .bottom-0 {
   bottom: 0px;
 }
 
-.-right-\[25px\] {
-  right: -25px;
+.top-0 {
+  top: 0px;
+}
+
+.-bottom-0 {
+  bottom: -0px;
 }
 
 .right-0 {
   right: 0px;
 }
 
-.-right-3 {
-  right: -0.75rem;
+.top-4 {
+  top: 1rem;
 }
 
-.top-9 {
-  top: 2.25rem;
+.-right-4 {
+  right: -1rem;
 }
 
-.-bottom-0 {
-  bottom: -0px;
+.-right-\[17px\] {
+  right: -17px;
 }
 
-.top-4 {
-  top: 1rem;
+.-right-\[20px\] {
+  right: -20px;
+}
+
+.-right-\[30px\] {
+  right: -30px;
+}
+
+.-right-\[28px\] {
+  right: -28px;
+}
+
+.-right-\[25px\] {
+  right: -25px;
+}
+
+.-right-\[22px\] {
+  right: -22px;
+}
+
+.-right-\[23px\] {
+  right: -23px;
 }
 
 .z-20 {
@@ -704,12 +736,8 @@ video {
   margin-left: auto;
 }
 
-.-ml-\[5px\] {
-  margin-left: -5px;
-}
-
-.ml-5 {
-  margin-left: 1.25rem;
+.ml-4 {
+  margin-left: 1rem;
 }
 
 .mt-4 {
@@ -728,6 +756,70 @@ video {
   margin-top: 0.25rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.-ml-2 {
+  margin-left: -0.5rem;
+}
+
+.-ml-3 {
+  margin-left: -0.75rem;
+}
+
+.-ml-1 {
+  margin-left: -0.25rem;
+}
+
+.-ml-0 {
+  margin-left: -0px;
+}
+
+.-ml-\[8px\] {
+  margin-left: -8px;
+}
+
+.-ml-\[10px\] {
+  margin-left: -10px;
+}
+
+.-ml-\[4px\] {
+  margin-left: -4px;
+}
+
+.-ml-\[5px\] {
+  margin-left: -5px;
+}
+
+.ml-96 {
+  margin-left: 24rem;
+}
+
+.ml-\[30rem\] {
+  margin-left: 30rem;
+}
+
+.ml-\[46rem\] {
+  margin-left: 46rem;
+}
+
+.ml-\[40rem\] {
+  margin-left: 40rem;
+}
+
+.ml-\[44rem\] {
+  margin-left: 44rem;
+}
+
+.ml-5 {
+  margin-left: 1.25rem;
+}
+
 .block {
   display: block;
 }
@@ -760,10 +852,6 @@ video {
   height: 20rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-screen {
   height: 100vh;
 }
@@ -776,6 +864,10 @@ video {
   height: auto;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .h-\[600px\] {
   height: 600px;
 }
@@ -788,6 +880,14 @@ video {
   height: 41px;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -929,6 +1029,22 @@ video {
   overflow: hidden;
 }
 
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
 .overflow-y-scroll {
   overflow-y: scroll;
 }
@@ -1089,6 +1205,16 @@ video {
   background-color: rgb(254 169 89 / var(--tw-bg-opacity));
 }
 
+.bg-neutral-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
+.bg-neutral-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
+}
+
 .bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1295,10 +1421,6 @@ video {
   padding: 1.25rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .p-0\.5 {
   padding: 0.125rem;
 }
@@ -1311,6 +1433,14 @@ video {
   padding: 0.25rem;
 }
 
+.p-3 {
+  padding: 0.75rem;
+}
+
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1321,11 +1451,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -1351,6 +1476,31 @@ video {
   padding-bottom: 0.75rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.px-9 {
+  padding-left: 2.25rem;
+  padding-right: 2.25rem;
+}
+
+.px-7 {
+  padding-left: 1.75rem;
+  padding-right: 1.75rem;
+}
+
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -1395,6 +1545,42 @@ video {
   padding-bottom: 0px;
 }
 
+.pr-2 {
+  padding-right: 0.5rem;
+}
+
+.pl-\[1\.80rem\] {
+  padding-left: 1.80rem;
+}
+
+.pr-\[1\.80rem\] {
+  padding-right: 1.80rem;
+}
+
+.pl-\[1\.90rem\] {
+  padding-left: 1.90rem;
+}
+
+.pr-\[1\.90rem\] {
+  padding-right: 1.90rem;
+}
+
+.pl-\[1\.85rem\] {
+  padding-left: 1.85rem;
+}
+
+.pr-\[1\.85rem\] {
+  padding-right: 1.85rem;
+}
+
+.pl-\[1\.82rem\] {
+  padding-left: 1.82rem;
+}
+
+.pr-\[1\.82rem\] {
+  padding-right: 1.82rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1489,6 +1675,16 @@ video {
   color: rgb(0 83 215 / var(--tw-text-opacity));
 }
 
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
+.text-cyan-50 {
+  --tw-text-opacity: 1;
+  color: rgb(236 254 255 / var(--tw-text-opacity));
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -1618,6 +1814,11 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -1646,6 +1847,11 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.focus\:bg-neutral-700:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
 .focus\:from-fuchsia-200:focus {
   --tw-gradient-from: #f5d0fe;
   --tw-gradient-to: rgb(245 208 254 / 0);
@@ -1724,6 +1930,16 @@ video {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.dark .dark\:border-gray-800 {
+  --tw-border-opacity: 1;
+  border-color: rgb(31 41 55 / var(--tw-border-opacity));
+}
+
+.dark .dark\:border-neutral-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(64 64 64 / var(--tw-border-opacity));
+}
+
 .dark .dark\:bg-gray-800 {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -1744,6 +1960,36 @@ video {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-\[\#1b1c1d\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(27 28 29 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-neutral-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-neutral-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:bg-neutral-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:bg-gradient-to-bl {
   background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
 }
@@ -1768,11 +2014,31 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-cream {
+  --tw-text-opacity: 1;
+  color: rgb(250 249 246 / var(--tw-text-opacity));
+}
+
 .dark .dark\:hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.dark .hover\:dark\:bg-gray-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+}
+
+.dark .hover\:dark\:bg-neutral-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
+.dark .dark\:hover\:bg-neutral-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
+}
+
 .dark .dark\:focus\:ring-blue-800:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));