File size: 6,724 Bytes
20ec4ad |
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 |
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState } from "react";
import classNames from "classnames";
import { toast } from "react-toastify";
import { FaPowerOff } from "react-icons/fa6";
import SpaceIcon from "@/assets/space.svg";
import Loading from "../loading/loading";
import Login from "../login/login";
import LoadButton from "../load-button/load-button";
const MsgToast = ({ url }) => (_jsxs("div", { className: "w-full flex items-center justify-center gap-3", children: ["Your space is live!", _jsx("button", { className: "bg-black text-sm block text-white rounded-md px-3 py-1.5 hover:bg-gray-900 cursor-pointer", onClick: () => {
window.open(url, "_blank");
}, children: "See Space" })] }));
function DeployButton({ html, error = false, auth, setHtml, prompts, }) {
const [open, setOpen] = useState(false);
const [loading, setLoading] = useState(false);
const [path, setPath] = useState(undefined);
const [config, setConfig] = useState({
title: "",
});
const createSpace = async () => {
setLoading(true);
try {
const request = await fetch("/api/deploy", {
method: "POST",
body: JSON.stringify({
title: config.title,
path,
html,
prompts,
}),
headers: {
"Content-Type": "application/json",
},
});
const response = await request.json();
if (response.ok) {
toast.success(_jsx(MsgToast, { url: `https://huggingface.co/spaces/${response.path ?? path}` }), {
autoClose: 10000,
});
setPath(response.path);
}
else {
toast.error(response.message);
}
}
catch (err) {
toast.error(err.message);
}
finally {
setLoading(false);
setOpen(false);
}
};
return (_jsxs("div", { className: "flex items-center justify-end gap-5", children: [_jsx(LoadButton, { auth: auth, setHtml: setHtml, setPath: setPath }), _jsxs("div", { className: "relative flex items-center justify-end", children: [auth &&
(auth.isLocalUse ? (_jsx(_Fragment, { children: _jsx("div", { className: "bg-amber-500/10 border border-amber-10 text-amber-500 font-semibold leading-5 lg:leading-6 py-1 px-5 text-xs lg:text-sm rounded-md mr-4 select-none", children: "Local Usage" }) })) : (_jsxs(_Fragment, { children: [_jsx("button", { className: "mr-2 cursor-pointer", onClick: () => {
if (confirm("Are you sure you want to log out?")) {
// go to /auth/logout page
window.location.href = "/auth/logout";
}
}, children: _jsx(FaPowerOff, { className: "text-lg text-red-500" }) }), _jsxs("p", { className: "mr-3 text-xs lg:text-sm text-gray-300", children: [_jsx("span", { className: "max-lg:hidden", children: "Connected as " }), _jsx("a", { href: `https://huggingface.co/${auth.preferred_username}`, target: "_blank", className: "underline hover:text-white", children: auth.preferred_username })] })] }))), _jsx("button", { className: classNames("relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20", {
"bg-pink-400": open,
"bg-pink-500": !open,
}), onClick: () => setOpen(!open), children: path ? "Update Space" : "Deploy to Space" }), _jsx("div", { className: classNames("h-screen w-screen bg-black/20 fixed left-0 top-0 z-10", {
"opacity-0 pointer-events-none": !open,
}), onClick: () => setOpen(false) }), _jsx("div", { className: classNames("absolute top-[calc(100%+8px)] right-0 z-10 w-80 bg-white border border-gray-200 rounded-lg shadow-lg transition-all duration-75 overflow-hidden", {
"opacity-0 pointer-events-none": !open,
}), children: !auth ? (_jsx(Login, { html: html, children: _jsx("p", { className: "text-gray-500 text-sm mb-3", children: "Host this project for free and share it with your friends." }) })) : (_jsxs(_Fragment, { children: [_jsxs("header", { className: "flex items-center text-sm px-4 py-2 border-b border-gray-200 gap-2 bg-gray-100 font-semibold text-gray-700", children: [_jsxs("span", { className: "text-xs bg-pink-500/10 text-pink-500 rounded-full pl-1.5 pr-2.5 py-0.5 flex items-center justify-start gap-1.5", children: [_jsx("img", { src: SpaceIcon, alt: "Space Icon", className: "size-4" }), "Space"] }), "Configure Deployment"] }), _jsxs("main", { className: "px-4 pt-3 pb-4 space-y-3", children: [_jsx("p", { className: "text-xs text-amber-600 bg-amber-500/10 rounded-md p-2", children: path ? (_jsxs("span", { children: ["Your space is live at", " ", _jsxs("a", { href: `https://huggingface.co/spaces/${path}`, target: "_blank", className: "underline hover:text-amber-700", children: ["huggingface.co/", path] }), ". You can update it by deploying again."] })) : ("Deploy your project to a space on the Hub. Spaces are a way to share your project with the world.") }), !path && (_jsxs("label", { className: "block", children: [_jsx("p", { className: "text-gray-600 text-sm font-medium mb-1.5", children: "Space Title" }), _jsx("input", { type: "text", value: config.title, className: "mr-2 border rounded-md px-3 py-1.5 border-gray-300 w-full text-sm", placeholder: "My Awesome Space", onChange: (e) => setConfig({ ...config, title: e.target.value }) })] })), error && (_jsx("p", { className: "text-red-500 text-xs bg-red-500/10 rounded-md p-2", children: "Your code has errors. Fix them before deploying." })), _jsx("div", { className: "pt-2 text-right", children: _jsxs("button", { disabled: error || loading || (!path && !config.title), className: "relative rounded-full bg-black px-5 py-2 text-white font-semibold text-xs hover:bg-black/90 transition-all duration-100 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300", onClick: createSpace, children: [path ? "Update Space" : "Create Space", loading && _jsx(Loading, {})] }) })] })] })) })] })] }));
}
export default DeployButton;
|