Spaces:
Configuration error
Configuration error
File size: 11,183 Bytes
8cfbb4d f73ae3c 8cfbb4d f73ae3c 8cfbb4d f73ae3c 8cfbb4d f73ae3c 8cfbb4d f73ae3c 8cfbb4d f73ae3c 8cfbb4d f73ae3c 8cfbb4d f73ae3c 8cfbb4d 543dfd9 8cfbb4d 111d106 543dfd9 8cfbb4d 111d106 8cfbb4d 543dfd9 f73ae3c 543dfd9 8cfbb4d 111d106 8cfbb4d 543dfd9 f73ae3c 8cfbb4d f73ae3c 8cfbb4d 111d106 8cfbb4d 111d106 543dfd9 111d106 f73ae3c 8cfbb4d f73ae3c 8cfbb4d 543dfd9 111d106 8cfbb4d f73ae3c 8cfbb4d 543dfd9 8cfbb4d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 |
import { Modal, Icon, Message} from 'semantic-ui-react'
import "../../css/dist/output.css"
import {ReactComponent as Gradio} from '../../images/gradio.svg'
import {ReactComponent as Streamlit} from '../../images/streamlit.svg'
import {ReactComponent as Exit} from '../../images/exit.svg'
import { useState } from 'react'
import {BsSearch} from 'react-icons/bs';
export default function Import(props){
const [tab, setTab] = useState("gradio")
const [subTab, setSubTab] = useState(0)
return (<div>
<Modal
basic
className=''
open={props.open}
size='fullscreen'
>
<div className='w-full shadow-lg rounded-lg'>
<ul class="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-neutral-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
<li class="" onClick={()=>{setTab("gradio")}}>
<button id="gradio-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 rounded-tl-lg ${ tab === "gradio" ? 'bg-gray-200 dark:bg-neutral-700' : 'hover:bg-gray-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 focus:bg-neutral-700'}`}><Gradio className=" w-20 h-10"/></button>
</li>
<li class="" onClick={()=>{setTab("streamlit")}}>
<button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className={`inline-block p-4 h-full ${ tab === "streamlit" ? 'bg-gray-200 dark:bg-neutral-700' : 'hover:bg-gray-300 dark:bg-neutral-800 dark:hover:bg-neutral-700 focus:bg-neutral-700'}`}><Streamlit className=" w-20 h-8"/></button>
</li>
</ul>
<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 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>
{ tab === "gradio" &&
<div className='w-full bg-white'>
<ul class="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-200 border-gray-200 dark:border-gray-800 dark:text-gray-400 dark:bg-neutral-900" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
<li class="" onClick={()=>{setSubTab(0)}}>
<button id="local-sub-tab" data-tabs-target="#local" type="button" role="tab" aria-controls="local-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 px-9 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300 dark:bg-neutral-800' : '' } hover:bg-gray-300 hover:dark:bg-neutral-800 `}>Local</button>
</li>
<li class="" onClick={()=>{setSubTab(1)}}>
<button id="shared-sub-tab" data-tabs-target="#Gradio" type="button" role="tab" aria-controls="shared-gradio" aria-selected={tab === "gradio" ? "true" : "false"} className={`inline-block p-4 pl-[1.82rem] pr-[1.82rem] text-base font-sans font-bold ${subTab === 1 ? 'bg-gray-300 dark:bg-neutral-800' : '' } hover:bg-gray-300 hover:dark:bg-neutral-800`}>Shared</button>
</li>
</ul>
{subTab === 0 && <Local/>}
{subTab === 1 && <Shared textHandler={props.textHandler} appendHandler={props.appendHandler} />}
{props.catch && <div className='p-5'>
<Message floating 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>
</div>}
</div>
}
</Modal>
</div>)
}
function Local(props){
return (
<div className='p-5 dark:bg-neutral-700'>
<Message floating color={props.dark ? 'black' : ''}>
<Message.Header>🏗️ Comming soon...</Message.Header>
<Message.Content className='p-5'>
This tab will allow you grab your function from a given directory and build
your own tabular module gradio functions
</Message.Content>
</Message>
</div>
)
}
function Shared(props){
const [preview, setPreview] = useState("")
const [fetchable, setFetch] = useState(false)
const isFetchable = async (url) => {
console.log(url)
fetch(url, {mode : "no-cors"}).then((re) => {
console.log(re)
if(re.url.includes("http://localhost:3000")){
setFetch(false)
} else { setFetch(true) }
}).catch((err)=>{
setFetch(false)
})
setFetch(false)
}
return (
<div className='w-full shadow-lg' onKeyPress={(e)=>{
if (e.key.includes("Enter")) props.appendHandler()
}}>
<div className='p-5'>
<Message floating>
<div className={`flex items-center rounded-md bg-light-white dark:bg-[#1b1c1d] mt-6 border-dashed`}>
<label className="relative block w-full p-5 focus:shadow-xl">
<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 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) => {
props.textHandler(e, "text")
setPreview(e.target.value)
setFetch(isFetchable(e.target.value))
}}
/>
</label>
</div>
{ fetchable === true && <div className=' w-full'>
<h1 className=' text-xl font-sans font-bold text-center text-black mb-2'> Preview </h1>
<div className='p-3 px-1 w-3/4 h-80 bg-gray-200 mr-auto ml-auto rounded-xl'>
<div className='w-full h-full overflow-hidden relative -ml-[5px]'>
<iframe title='Preview' src={preview} className=' absolute top-0 bottom-0 left-0 -right-[25px] overflow-y-scroll w-full h-full mr-auto ml-auto'/>
</div>
</div>
</div>}
<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 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'
onChange={(e) => {
props.textHandler(e, "name")
}}
/>
</label>
</div>
<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-[#1b1c1d] rounded-md group-hover:bg-opacity-0">
Enter
</span>
</button>
</div>
</Message>
</div>
</div>
)
} |