Spaces:

jbilcke-hf
/

comfyui-deploy-demo

Paused

BennyKok commited on Feb 29

Commit

0bf8fdb

•

1 Parent(s): 3997342

fix: optimize for mobile

Files changed (3) hide show

src/app/layout.tsx CHANGED Viewed

@@ -18,6 +18,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
   )

 }) {
   return (
     <html lang="en">
+      {/* <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></meta> */}
       <body className={inter.className}>{children}</body>
     </html>
   )

src/components/WebsocketDemo.tsx CHANGED Viewed

@@ -25,7 +25,7 @@ export function WebsocketDemo() {
     const canvasRef = useRef<HTMLCanvasElement>(null); // Reference to the canvas element
     const sendInput = useCallback(() => {
-        if (status == "reconnecting")
             return
         if (ws?.readyState == ws?.CLOSED) {
@@ -60,6 +60,7 @@ export function WebsocketDemo() {
     }, [debouncedPrompt])
     const connectWS = useCallback((data: NonNullable<Awaited<ReturnType<typeof getWebsocketUrl>>>) => {
         const websocket = new WebSocket(data.ws_connection_url);
         websocket.binaryType = "arraybuffer";
         websocket.onopen = () => {
@@ -155,20 +156,18 @@ export function WebsocketDemo() {
     }, [connectWS, reconnectCounter])
     return (
-        <div className='flex flex-col gap-2'>
             <div className='flex gap-2'>
                 <Badge variant={'outline'} className='w-fit'>Status: {status}</Badge>
-                <Badge variant={'outline'} className='w-fit'>
                     {currentLog}
                     {status == "connected" && !currentLog && "stating comfy ui"}
                     {status == "ready" && !currentLog && " running"}
-                </Badge>
             </div>
-            <canvas ref={canvasRef} className='rounded-lg' width="1024" height="1024"></canvas>
             <Input
-                id="picture"
                 type="text"
                 value={prompt}
                 onChange={(e) => setPrompt(e.target.value)}

     const canvasRef = useRef<HTMLCanvasElement>(null); // Reference to the canvas element
     const sendInput = useCallback(() => {
+        if (status == "reconnecting" || status == "connecting")
             return
         if (ws?.readyState == ws?.CLOSED) {
     }, [debouncedPrompt])
     const connectWS = useCallback((data: NonNullable<Awaited<ReturnType<typeof getWebsocketUrl>>>) => {
+        setStatus("connecting");
         const websocket = new WebSocket(data.ws_connection_url);
         websocket.binaryType = "arraybuffer";
         websocket.onopen = () => {
     }, [connectWS, reconnectCounter])
     return (
+        <div className='flex md:flex-col gap-2 px-2 flex-col-reverse'>
             <div className='flex gap-2'>
                 <Badge variant={'outline'} className='w-fit'>Status: {status}</Badge>
+                {(currentLog || status == "connected" || status == "ready") && <Badge variant={'outline'} className='w-fit'>
                     {currentLog}
                     {status == "connected" && !currentLog && "stating comfy ui"}
                     {status == "ready" && !currentLog && " running"}
+                </Badge>}
             </div>
+            <canvas ref={canvasRef} className='rounded-lg ring-1 ring-black/10' width="1024" height="1024"></canvas>
             <Input
                 type="text"
                 value={prompt}
                 onChange={(e) => setPrompt(e.target.value)}

src/components/ui/input.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}

       <input
         type={type}
         className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-md ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}