Spaces:
Configuration error
Configuration error
File size: 9,932 Bytes
8cfbb4d 111d106 8cfbb4d 111d106 8cfbb4d 111d106 8cfbb4d 111d106 8cfbb4d 111d106 8cfbb4d 111d106 8cfbb4d 111d106 8cfbb4d 111d106 8cfbb4d 111d106 8cfbb4d 111d106 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 |
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
open={props.open}
size='larg'
>
<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-gray-800" id="defaultTab" data-tabs-toggle="#defaultTabContent" role="tablist">
<li class="mr-2" 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' : '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 class="mr-2">
<button id="services-tab" data-tabs-target="#Streamlit" type="button" role="tab" aria-controls="services" aria-selected="false" className="inline-block p-4 opacity-30"><Streamlit className=" w-20 h-10"/></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 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]"/>
</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-700 dark:text-gray-400 dark:bg-gray-800" 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-6 text-base font-sans font-bold ${subTab === 0 ? 'bg-gray-300' : '' } hover:bg-gray-300 `}>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 px-6 text-base font-sans font-bold ${subTab === 1 ? 'bg-gray-300' : '' } hover:bg-gray-300 `}>Shared</button>
</li>
</ul>
{subTab === 0 && <div className='p-5 text-black'> Coming soon ....</div>}
{subTab === 1 && <Shared textHandler={props.textHandler} appendHandler={props.appendHandler} />}
{props.catch && <div className='p-5'>
<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>
</div>}
</div>
}
</Modal>
</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'>
<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 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-4 w-3/4 bg-gray-200 mr-auto ml-auto rounded-xl'>
<iframe title='Preview' src={preview} className=' w-full h-80 mr-auto ml-auto'/>
</div>
</div>}
<div className={`flex items-center rounded-md bg-light-white 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`}
placeholder={`Name` }
type="text" name="search"
autoComplete='off'
onChange={(e) => {
props.textHandler(e, "name")
}}
/>
</label>
</div>
<div className=' ml-4'>
<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">
Enter
</span>
</button>
</div>
</div>
)
} |