import { Modal, Icon, Message } from 'semantic-ui-react'
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 { ReactComponent as Proxmox } from '../../images/proxmox.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)
const [embedUrl, setEmbedUrl] = useState("");
const [vmid, setVmid] = useState('');
const [node, setNode] = useState('');
const [iframeSrc, setIframeSrc] = useState("");
const [tab, setTab] = useState('')
const handleSubmit = async (e) => {
e.preventDefault();
// Assuming iframeSrc is already bound to an input field where users can paste any iframe link
console.debug("Embed submit:", iframeSrc);
props.onAddEmbed({ url: iframeSrc, type: 'embed' });
};
const handleProxmoxSubmit = async (e) => {
e.preventDefault();
const requestData = { vmid, node };
fetch("http://localhost:2000/api/proxmox/vnc", {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(requestData)
})
.then(response => response.json())
.then(data => {
if (data.iframe_src) {
setIframeSrc(data.iframe_src);
props.onAddEmbed({ url: data.iframe_src, type: 'embed' });
} else {
console.error("Failed to get iframe source URL");
}
})
.catch(error => {
console.error("Error fetching iframe source URL:", error);
});
};
return (
{
setTab("gradio")
props.catch ? props.handelError(false) : props.handelError(props.catch)
}}>
{
setTab("streamlit")
props.catch ? props.handelError(false) : props.handelError(props.catch)
}}>
{
setTab("proxmox")
props.catch ? props.handelError(false) : props.handelError(props.catch)
}}>
{
props.quitHandeler(false)
props.catch ? props.handelError(false) : props.handelError(props.catch)
}}>
{tab === "gradio" &&
{
setSubTab(0)
props.catch ? props.handelError(false) : props.handelError(props.catch)
}}>
Local
{
setSubTab(1)
props.catch ? props.handelError(false) : props.handelError(props.catch)
}}>
Shared
{subTab === 0 &&
}
{subTab === 1 &&
}
{props.catch &&
🚫 Something went wrong...
🤔 Possible Things That could of happen
- The input was empty
- The connection was forbidden
- The name was already taken
- The link you gave did not pass the regex
- http://localhost:xxxx
- http://xxxxx.gradio.app
- https://hf.space/embed/$user/$space_name/+
- link already exist within the menu
}
}
{tab === "streamlit" &&
}
// Update the form to include a title input
{tab === "IframeURL" && (
)}
// Ensure this conditional rendering block is correctly placed within your component's return statement
{iframeSrc && (
)}
{iframeSrc &&
}
{tab === "proxmox" &&
}
setEmbedUrl(e.target.value)}
/>
props.onAddEmbed({ url: embedUrl, type: 'embed' })}>
Add Embed
)
}
function Local(props) {
return (
🏗️ Comming soon...
This tab will allow you grab your function from a given directory and build
your own tabular module gradio functions
)
}
function Shared(props) {
const [preview, setPreview] = useState("")
const [fetchable, setFetch] = useState(false)
const isFetchable = async (url) => {
const pattern = {
share: new RegExp("^https?:\\/\\/([0-9a-zA-Z-]+)\\.gradio\\.live\\/?"),
hugginFace: new RegExp("^https?:\\/\\/([a-zA-Z0-9-]+)-gradio\\.hf\\.space\\/?$")
}
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 (
{
if (e.key.includes("Enter")) props.appendHandler(props.type)
}}>
)
}