frontend logic request

.next/app-build-manifest.json

@@ -1,3 +1,15 @@
 {
-  "pages": {}
+  "pages": {
+    "/page": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/page.js"
+    ],
+    "/layout": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/css/app/layout.css",
+      "static/chunks/app/layout.js"
+    ]
+  }
 }

.next/build-manifest.json

@@ -2,15 +2,29 @@
   "polyfillFiles": [
     "static/chunks/polyfills.js"
   ],
-  "devFiles": [],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
   "ampDevFiles": [],
   "lowPriorityFiles": [
     "static/development/_buildManifest.js",
     "static/development/_ssgManifest.js"
   ],
-  "rootMainFiles": [],
+  "rootMainFiles": [
+    "static/chunks/webpack.js",
+    "static/chunks/main-app.js"
+  ],
   "pages": {
-    "/_app": []
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ]
   },
   "ampFirstPages": []
 }

.next/cache/webpack/client-development-fallback/0.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:24e912a8cf3afd4a0dc57b45ea8c160a56e25d9dfafe6a6b1567d786b9eb3f30
-size 11807590
+oid sha256:a317ed37906f59b05625ade73074ed37bdf841988f6d26d369c3c787f87c789d
+size 11801673

.next/cache/webpack/client-development-fallback/index.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1a4cb908f31cda42cef9dca2fa7598c9737c8a80567e177074355770949b3049
-size 43790
+oid sha256:df8598f7810823493cd7aef06315d0b9564300ae456508ea66af248cf416dd1f
+size 44098

.next/cache/webpack/client-development/1.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:88ebb7c4ede2134dfdefa3e49173dd52e3a154fc2664e11c683c3b54bdfe315c
-size 5802
+oid sha256:f6afffd78d99646dfdcb901d41ef337e33087b7dd06cc05902a7af805ddea636
+size 2420

.next/cache/webpack/client-development/10.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a3cb78b1fd7b9999b22782f8798df691906194f57f94fa93114b5c32bb1c5848
-size 220849
+oid sha256:fc5f14b88bb5a14976baf067a694e254c85788836f33e4f1544bf0891c6f6828
+size 457122

.next/cache/webpack/client-development/11.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:86214c25b8bfb6b91bbf6f1abad5eaa079b6b9e6338d867e43694dd5209a2b0c
-size 7666
+oid sha256:cbd6c83761e957717a14b2a84b3fe962fa2f56cc2976477e8cf0fcfe00f5a76f
+size 6104

.next/cache/webpack/client-development/12.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:104f4f27ced333427fdca6723f9ffe7f577a6fbc749e29c08473bc50b173d735
-size 7492970
+oid sha256:3eea80fc6132238ea407bf75bb3a648a1b95eedf61725d4b911cabed2f4a30da
+size 3636850

.next/cache/webpack/client-development/13.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:889aa0f67f121bb153abe0f95796d0f501816b972e824fe1eb35a009a75a949a
-size 4192
+oid sha256:a9799d2852e56530610425f14a0239d49aa0398997bc9a2dbf45bd6d0551168e
+size 878172

.next/cache/webpack/client-development/2.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aa23c95c84e24e0f0434b81b2eb44ab30e39f8220564a05bf6a64bf37ebbac87
-size 8646
+oid sha256:a42a783ebdba243a4bbd23cc6fd6b8c9dbdc2e34b4675f4baef184e0af435712
+size 3498

.next/cache/webpack/client-development/3.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:739d36ae0c5e78aa7c0d727ecea5c8402d44c4fd7ece2fa27bfd7b48e0071e1c
-size 2419
+oid sha256:574d6a0699e13e7ace5e10fae3e1541aed383025d90e1b38e04823b412decf90
+size 1429

.next/cache/webpack/client-development/4.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:519fa49545746ba6e3f9f169a68ee737fb0b87aa0c0990578d98e8a6f82330f6
-size 1680
+oid sha256:9857266a1b5a327a2ef3be4667d74678793de7c719dfe2b0062c1547241c149f
+size 7474915

.next/cache/webpack/client-development/5.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c8ab3b710cf17c166a7e2a32c8c1623e2968d71627b130b21b795aa3c0f3fce7
-size 2406608
+oid sha256:21d032bdd0bc8ee94ce7511bf3d9530fde05dc990b98fad162ca0b0ff0191650
+size 24528

.next/cache/webpack/client-development/6.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4953f7de98d89e17835adfd30eab7fe7a0d89e2c85ca2bf6c9d8216db20fe614
-size 10861168
+oid sha256:6cd7eb4e8ea6bc122d399e6f31e65fce98fd95d4286a55ac53a58d30e2a98ae1
+size 9955483

.next/cache/webpack/client-development/7.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4439a1350990c0101d99f1d3d93242c40b31745b0777358bf1cad351081991eb
-size 1995
+oid sha256:34af9d97b1618c1db4a1bfb8f1e73a1c341dc3d0730e104e8c066f0b410ae385
+size 17215

.next/cache/webpack/client-development/8.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:988d29ef3f26d341a28412772a4e15f3d7ec2866ce9e31d1d7efe419de9c2f56
-size 1566
+oid sha256:80b7a026552212e47ea53d3b84633bc3dffbe9bc318a2e6ef421fd5ad1e202d2
+size 4318

.next/cache/webpack/client-development/9.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2eeb25ccfa3413bee59b8ae100c2e1c6e29bc6c6dd95c46363bc29580060decc
-size 1437
+oid sha256:588673ea1c584663784ec3260e942d9d8154165c27f0d1526a7ee3307d5ac52b
+size 5817

.next/cache/webpack/client-development/index.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9cb55123b3beab58e938b0613cc7320d44abb3ccdfe27a6e2727f5fa0a36b373
-size 2138
+oid sha256:cc173317e33fbdac23535225f26c99f3f16806d7e7ee523796ef294e86d6d7c7
+size 201483

.next/cache/webpack/server-development/0.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5b28109176cd088cee42f1d474924e6d309ec435e9b0cec024a886ef35621b55
-size 5341
+oid sha256:b00bcf3f158cd6e349ebd0c7c72d6974a4e4e1cf433708fca1a1cb647ed5db75
+size 5281

.next/cache/webpack/server-development/1.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6a35800697750796eea5aee38356a5c77101925d7fe71a1f2c26bb6a9f190498
-size 5348
+oid sha256:162690c86b2c7aa36b8d152ae2d666398dbf6f30a041678d45010890c1342c04
+size 232873

.next/cache/webpack/server-development/10.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d190dcf2ee01c20b68aa5e6e37ad1ad7cbef99d1822d238ccc5d802ab1b6ec0d
-size 7364
+oid sha256:a67eaf32aa7e0d72da5435ed543d504515efb2bbb20c7feb8d631781e0174409
+size 64265

.next/cache/webpack/server-development/11.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9d16db97e3f36425c97355f90d00670249dc83ea225a992c280e70e0d14f4e46
-size 3953
+oid sha256:29ff2dfb4f961dbda026648c7addde01092fd87bafcfd6b6ddfcbf7e6f48a7c5
+size 1772669

.next/cache/webpack/server-development/2.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:41f9118eedbd702eb4a51649e861a21a638ce9a114cb04ecd52fd7426381e627
-size 6382
+oid sha256:043df0e98b64ed377b6725af5e43b65523ba9de7a0be9ed859217baee9e92dbd
+size 1220

.next/cache/webpack/server-development/3.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f56101b6ff28eaef76cc6b565012c00366b3f2790d4e59ed78dd011dd62e0313
-size 1374
+oid sha256:2a108bd4fa63b22cb85dd93d918510b6d3b4ab0c3a79dd7f787acb24a0830a5f
+size 2343

.next/cache/webpack/server-development/4.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4980d5fa2daa63e99cfc36a2a9c5cc22764c6279f7ca93a84910bb771ff5ae96
-size 64227
+oid sha256:a57ea957f94a8fe806bd7c28afe23e197e25482305efd821e0bfd7477f77eb29
+size 5342

.next/cache/webpack/server-development/5.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e2f98375d83384e8c420514ae4d5bd187505cecc3835d9f71f62d185e28eb0cb
-size 6626906
+oid sha256:4f123d7b94b3bb43a951b238932c28a4158914aa2f5d79bfd58a5c2b8d06dc38
+size 3173279

.next/cache/webpack/server-development/6.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1c4623e4392c63756ac940274a58b7d7e48dae32458c88dc2284a9bdfccacd3e
-size 566181
+oid sha256:f2490a0cb88b9836527a89755071331e715fb87c8bdb6fdb33c6f5a0fe56f989
+size 1637613

.next/cache/webpack/server-development/7.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2aa27c015e82b336739cc92d4fa8a12dbb1c8e9355c5a04cdbc4b0b7888c565d
-size 5978
+oid sha256:25bf819f76ca895e9dd5214a474b5e286c691ab2cec3c34f6168ac3ad1f4f09c
+size 13091

.next/cache/webpack/server-development/8.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4b9f4c76ba40e25b9233d174119a2c5324d95bdfb7a3e059bc14cdfc510693f6
-size 244408
+oid sha256:1226b0385435cff5d4b8f0f291a00c1c34819a818be4753b06c3d8b01d9f8fee
+size 2067928

.next/cache/webpack/server-development/9.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0ef96e0a6906131883b3725bed15c82d4cb547db4f820ce7d5ff6905ae005cfa
-size 312687
+oid sha256:f74305ec845b4db271d37beb74b8828793c29b99a9e1f39175d6ce5eeadb4ebe
+size 3613

.next/cache/webpack/server-development/index.pack.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8cd7adbe0b6398c1a12689fe31a19893de28a7cd3e49826b61f44706407fd2e2
-size 114367
+oid sha256:c1ea094ac8f5137c504de93d6ad223152773f1341d10d6a8252491b43bc82ed7
+size 128287

.next/server/app-paths-manifest.json

@@ -1 +1,3 @@
-{}
+{
+  "/page": "app/page.js"
+}

.next/server/middleware-build-manifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST={"polyfillFiles":["static/chunks/polyfills.js"],"devFiles":[],"ampDevFiles":[],"lowPriorityFiles":["static/development/_buildManifest.js","static/development/_ssgManifest.js"],"rootMainFiles":[],"pages":{"/_app":[]},"ampFirstPages":[]}
+self.__BUILD_MANIFEST={"polyfillFiles":["static/chunks/polyfills.js"],"devFiles":["static/chunks/react-refresh.js"],"ampDevFiles":[],"lowPriorityFiles":["static/development/_buildManifest.js","static/development/_ssgManifest.js"],"rootMainFiles":["static/chunks/webpack.js","static/chunks/main-app.js"],"pages":{"/_app":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_app.js"],"/_error":["static/chunks/webpack.js","static/chunks/main.js","static/chunks/pages/_error.js"]},"ampFirstPages":[]}

.next/server/next-font-manifest.js

@@ -1 +1 @@
-self.__NEXT_FONT_MANIFEST="{\"pages\":{},\"app\":{},\"appUsingSizeAdjust\":false,\"pagesUsingSizeAdjust\":false}"
+self.__NEXT_FONT_MANIFEST="{\"pages\":{},\"app\":{\"/Users/enzo/Desktop/development/hf-fast-image-generation/app/layout\":[\"static/media/c9a5bc6a7c948fb0-s.p.woff2\"]},\"appUsingSizeAdjust\":true,\"pagesUsingSizeAdjust\":false}"

.next/server/next-font-manifest.json

@@ -1 +1 @@
-{"pages":{},"app":{},"appUsingSizeAdjust":false,"pagesUsingSizeAdjust":false}
+{"pages":{},"app":{"/Users/enzo/Desktop/development/hf-fast-image-generation/app/layout":["static/media/c9a5bc6a7c948fb0-s.p.woff2"]},"appUsingSizeAdjust":true,"pagesUsingSizeAdjust":false}

.next/server/pages-manifest.json

@@ -1 +1,5 @@
-{}
+{
+  "/_app": "pages/_app.js",
+  "/_error": "pages/_error.js",
+  "/_document": "pages/_document.js"
+}

.next/static/development/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST = {__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},sortedPages:["\u002F_app"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
+self.__BUILD_MANIFEST = {__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],sortedPages:["\u002F_app","\u002F_error"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

components/input-generation.tsx

@@ -1,17 +1,25 @@
+import classNames from "classnames";
 import { useRef, useState } from "react";
 import { HiLightBulb } from "react-icons/hi";
 
 interface Props {
   prompt: string;
+  loading: boolean;
   onChange: (value: string) => void;
+  onSubmit: () => void;
 }
 
-export const InputGeneration: React.FC<Props> = ({ prompt, onChange }) => {
+export const InputGeneration: React.FC<Props> = ({
+  prompt,
+  loading,
+  onChange,
+  onSubmit,
+}) => {
   const input = useRef<HTMLInputElement>(null);
 
   return (
     <div
-      className="bg-white rounded-full p-3 w-full max-w-xl flex items-center justify-between group transition-all duration-200 focus-within:ring-[6px] focus-within:ring-primary border-[2px] border-white focus-within:ring-opacity-40 focus-within:border-primary"
+      className="bg-white rounded-full p-3 w-full max-w-xl flex items-center justify-between group transition-all duration-200 focus-within:ring-[6px] focus-within:ring-primary border-[2px] border-white focus-within:ring-opacity-40 focus-within:border-primary gap-3"
       onClick={() => input.current?.focus()}
     >
       <div className="flex items-center gap-3 pl-3 w-full">
@@ -20,16 +28,25 @@ export const InputGeneration: React.FC<Props> = ({ prompt, onChange }) => {
           ref={input}
           value={prompt}
           type="text"
-          className="h-full text-lg placeholder:text-gray-400 text-gray-900 font-medium w-full outline-none"
+          className="h-full text-lg placeholder:text-gray-400 text-gray-900 font-medium w-full outline-none truncate"
           placeholder="A thug cat riding his small bike"
           onChange={(e) => onChange(e.target.value)}
         />
       </div>
       <button
         disabled={!prompt}
-        className="bg-primary disabled:bg-gray-300 disabled:text-gray-500 uppercase text-white font-semibold rounded-full px-4 py-2 text-base transition-all duration-200"
+        className={classNames(
+          "bg-primary disabled:bg-gray-300 disabled:text-gray-500 uppercase text-white font-semibold rounded-full px-4 py-2 text-base transition-all duration-200",
+          {
+            "animate-pulse": loading,
+          }
+        )}
+        onClick={() => {
+          if (!prompt || loading) return;
+          onSubmit();
+        }}
       >
-        Generate
+        {loading ? "Generating..." : "Generate"}
       </button>
     </div>
   );

components/main/hooks/useInputGeneration.ts

@@ -0,0 +1,38 @@
+import { useState } from "react"
+
+export const useInputGeneration = () => {
+  const [prompt, setPrompt] = useState<string>('')
+  const [loading, setLoading] = useState<boolean>(false)
+
+  const submit = () => {
+    setLoading(true)
+    return new Promise(async (resolve, reject) => {
+      fetch(
+        'https://api-inference.huggingface.co/models/stabilityai/stable-diffusion-xl-base-1.0',
+        {
+          headers: {
+            Authorization: `Bearer {TOKEN}`,
+            'Content-Type': 'application/json',
+          },
+          method: 'POST',
+          body: JSON.stringify({
+            inputs: prompt,
+          })
+        }
+      )
+      .then((res) => console.log(res))
+      .finally(() => {
+        setLoading(false)
+        resolve(true)
+      })
+    })
+  }
+
+  return {
+    prompt,
+    setPrompt,
+    loading,
+    submit,
+  }
+
+}

components/main/index.tsx

@@ -3,18 +3,22 @@
 import { useState } from "react";
 import classNames from "classnames";
 import { motion } from "framer-motion";
+import { HiUserGroup, HiHeart } from "react-icons/hi2";
 
 import { InputGeneration } from "@/components/input-generation";
 import { Button } from "@/components/button";
+import { useInputGeneration } from "./hooks/useInputGeneration";
 
 const categories = [
   {
     key: "community",
     label: "Community",
+    icon: <HiUserGroup className="text-2xl" />,
   },
   {
     key: "my-own",
     label: "My own generations",
+    icon: <HiHeart className="text-2xl" />,
   },
 ];
 
@@ -33,21 +37,27 @@ const IMAGES = [
 ];
 
 export const Main = () => {
-  const [prompt, setPrompt] = useState<string>("");
+  const { prompt, setPrompt, submit, loading } = useInputGeneration();
   const [category, setCategory] = useState<string>("community");
 
   return (
     <main className="pt-6 z-[2] relative">
       <div className="px-6 mx-auto max-w-7xl">
         <div className="flex items-center justify-between w-full -translate-y-1/2">
-          <InputGeneration prompt={prompt} onChange={setPrompt} />
+          <InputGeneration
+            prompt={prompt}
+            onChange={setPrompt}
+            onSubmit={submit}
+            loading={loading}
+          />
           <div className="flex items-center justify-end gap-5 w-full">
-            {categories.map(({ key, label }) => (
+            {categories.map(({ key, label, icon }) => (
               <Button
                 key={key}
                 theme={key !== category ? "white" : "primary"}
                 onClick={() => setCategory(key)}
               >
+                {icon}
                 {label}
               </Button>
             ))}