From 67a394a4137be9dfc46255e4f37c69969d233ab3 Mon Sep 17 00:00:00 2001
From: Zeke Sikelianos <zeke@sikelianos.com>
Date: Mon, 13 May 2024 10:19:55 -0700
Subject: [PATCH] autofocus input

---
 app/page.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/page.js b/app/page.js
index 1eb6185f..cfe85e2d 100644
--- a/app/page.js
+++ b/app/page.js
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import Image from "next/image";
 
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
@@ -8,6 +8,11 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 export default function Home() {
   const [prediction, setPrediction] = useState(null);
   const [error, setError] = useState(null);
+  const promptInputRef = useRef(null);
+
+  useEffect(() => {
+    promptInputRef.current.focus();
+  }, []);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -32,7 +37,7 @@ export default function Home() {
       prediction.status !== "failed"
     ) {
       await sleep(1000);
-      const response = await fetch("/api/predictions/" + prediction.id);
+      const response = await fetch(`/api/predictions/${prediction.id}`);
       prediction = await response.json();
       if (response.status !== 200) {
         setError(prediction.detail);
@@ -58,6 +63,7 @@ export default function Home() {
           className="flex-grow"
           name="prompt"
           placeholder="Enter a prompt to display an image"
+          ref={promptInputRef}
         />
         <button className="button" type="submit">
           Go!