Spaces:
Configuration error
Configuration error
File size: 12,555 Bytes
0563a7e e1db427 a053984 0563a7e |
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 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
import { Modal, Icon, Message} from 'semantic-ui-react'
import "../../src/css/dist/output.css"
import {ReactComponent as Gradio} from '../../src/images/gradio.svg'
import {ReactComponent as Streamlit} from '../../src/images/streamlit.svg'
import {ReactComponent as Exit} from '../../src/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 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">
<li className="" onClick={()=>{
setTab("gradio")
props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
<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' : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Gradio className=" w-20 h-10"/></button>
</li>
<li className="" onClick={()=>{
setTab("streamlit")
props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
<button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className={`inline-block p-4 rounded-tl-lg ${ tab === "streamlit" ? 'bg-gray-200' : 'hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 focus:bg-gray-700'}`}><Streamlit className=" w-20 h-10"/></button>
</li>
</ul>
<div className='absolute right-5 top-5 z-20 mr-5'
onClick={()=>{
props.quitHandeler(false)
props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
<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 className="flex flex-wrap text-sm font-medium text-center text-gray-500 bg-gray-200 border-gray-200 dark:border-gray-700 dark:text-gray-400 dark:bg-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
<li className="" onClick={()=>{
setSubTab(0)
props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
<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-6 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300' : '' } hover:bg-gray-300 `}>Local</button>
</li>
<li className="" onClick={()=>{
setSubTab(1)
props.catch ? props.handelError(false) : props.handelError(props.catch) }}>
<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 px-6 text-base font-sans font-bold ${subTab === 1 ? 'bg-gray-300' : '' } hover:bg-gray-300 `}>Shared</button>
</li>
</ul>
{subTab === 0 && <Local/>}
{subTab === 1 && <Shared type="gradio" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>}
{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>
}
{ tab === "streamlit" &&
<div className='w-full bg-white'>
<Shared type="streamlit" textHandler={props.textHandler} appendHandler={props.appendHandler} handelError={props.handelError} catch={props.catch}/>
</div>
}
</Modal>
</div>)
}
function Local(props){
return (
<div className='p-5'>
<Message floating>
<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) => {
const pattern = {
share : /^https?:\/\/*([0-9]{5})*(-gradio)*(.app)?(\/)?$/,
hugginFace : /^https?:\/\/*(hf.space)\/*(embed)\/*([a-zA-Z0-9+_-]+)\/*([a-zA-Z0-9+_-]+)\/*([+])?(\/)?$/
}
if (!pattern.share.test(url) &&
!pattern.hugginFace.test(url)){
setFetch(false)
return
}
fetch(url, {mode : "no-cors"}).then((re) => {
console.log(re)
if(re.url.includes("http://localhost:3000")){
setFetch(false)
} else {
setFetch(true)
props.catch ? props.handelError(false) : props.handelError(props.catch)
}
}).catch((err)=>{
setFetch(false)
})
setFetch(false)
}
return (
<div className='w-full shadow-lg' onKeyPress={(e)=>{
if (e.key.includes("Enter")) props.appendHandler(props.type)
}}>
<div className='p-5'>
<Message floating>
<div className={`flex items-center rounded-md bg-light-white 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 ( > 20 Characters)` }
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(props.type)}}>
<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>
)
} |