Spaces:

AnthoneoJ
/

nextjs-replicate

Runtime error

App Files Files Community

AnthoneoJ commited on Feb 19, 2024

Commit

cf476f3

verified ·

1 Parent(s): 8640bf4

Upload 16 files

Browse files

Files changed (16) hide show

.eslintrc.json +3 -0
.gitignore +40 -0
Dockerfile +19 -0
app/favicon.ico +0 -0
app/globals.css +107 -0
app/layout.js +17 -0
app/page.js +73 -0
app/page.module.css +35 -0
jsconfig.json +7 -0
next.config.mjs +18 -0
package-lock.json +0 -0
package.json +20 -0
pages/api/predictions/[id].js +20 -0
pages/api/predictions/index.js +31 -0
public/next.svg +1 -0
public/vercel.svg +1 -0

.eslintrc.json ADDED Viewed

	@@ -0,0 +1,3 @@

+{
+  "extends": "next/core-web-vitals"
+}

.gitignore ADDED Viewed

	@@ -0,0 +1,40 @@

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# custom
+notes_nextjs.txt
+.env.local
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+# testing
+/coverage
+# next.js
+/.next/
+/out/
+# production
+/build
+# misc
+.DS_Store
+*.pem
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# local env files
+.env*.local
+# vercel
+.vercel
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Dockerfile ADDED Viewed

	@@ -0,0 +1,19 @@

+# ==== CONFIGURE =====
+# Use a Node 20 base image
+FROM node:20
+# Set the working directory to /code inside the container
+WORKDIR /code
+# Copy app files
+COPY . .
+# ==== BUILD =====
+# Install dependencies (npm ci makes sure the exact versions in the lockfile gets installed)
+RUN npm ci
+# Build the app
+RUN npm run build
+# ==== RUN =======
+# Set the env to "production"
+ENV NODE_ENV production
+# Expose the port on which the app will be running (3000 is the default that `serve` uses)
+EXPOSE 7860
+# Start the app
+CMD [ "npx", "serve", "-l", "7860", "build" ]

app/favicon.ico ADDED Viewed

app/globals.css ADDED Viewed

	@@ -0,0 +1,107 @@

+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(
+    rgba(255, 255, 255, 1),
+    rgba(255, 255, 255, 0)
+  );
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(
+    #00000080,
+    #00000040,
+    #00000030,
+    #00000020,
+    #00000010,
+    #00000010,
+    #00000080
+  );
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(
+      to bottom right,
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0),
+      rgba(1, 65, 255, 0.3)
+    );
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(
+      #ffffff80,
+      #ffffff40,
+      #ffffff30,
+      #ffffff20,
+      #ffffff10,
+      #ffffff10,
+      #ffffff80
+    );
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

app/layout.js ADDED Viewed

	@@ -0,0 +1,17 @@

+import { Inter } from "next/font/google";
+import "./globals.css";
+const inter = Inter({ subsets: ["latin"] });
+export const metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

app/page.js ADDED Viewed

	@@ -0,0 +1,73 @@

+"use client";
+import { useState } from "react";
+import Head from "next/head";
+import styles from "./page.module.css";
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+export default function Home() {
+  const [prediction, setPrediction] = useState(null);
+  const [error, setError] = useState(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const response = await fetch("/api/predictions", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        image: e.target.imgUrl.value,
+        prompt: e.target.prompt.value,
+      }),
+    });
+    let prediction = await response.json();
+    if (response.status !== 201) {
+      setError(prediction.detail);
+      return;
+    }
+    setPrediction(prediction);
+    while (
+      prediction.status !== "succeeded" &&
+      prediction.status !== "failed"
+    ) {
+      await sleep(1000);
+      const response = await fetch("/api/predictions/" + prediction.id);
+      prediction = await response.json();
+      if (response.status !== 200) {
+        setError(prediction.detail);
+        return;
+      }
+      setPrediction(prediction);
+    }
+  };
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>Replicate + Next.js</title>
+      </Head>
+      <p>
+        Large Vision Language model - {" "}
+        <a href="https://replicate.com/lucataco/qwen-vl-chat">QWEN-VL-CHAT</a>:
+      </p>
+      <form className={styles.form} onSubmit={handleSubmit}>
+        <input type="text" name="imgUrl" placeholder="Enter image url here" />
+        <input type="text" name="prompt" placeholder="Enter text prompt here" />
+        <button type="submit">Go!</button>
+      </form>
+      {error && <div>{error}</div>}
+      {prediction && (
+        <div>
+          <p>Output: {prediction.output}</p>
+          <p>Status: {prediction.status}</p>
+        </div>
+      )}
+    </div>
+  );
+}

app/page.module.css ADDED Viewed

	@@ -0,0 +1,35 @@

+.container {
+  padding: 2rem;
+  font-size: 1.3rem;
+  max-width: 48rem;
+  margin: 0 auto;
+}
+.form {
+  display: flex;
+  margin-bottom: 2rem;
+}
+.form input {
+  width: 100%;
+  padding: 1rem;
+  border: 1px solid #000;
+  border-radius: 0.25rem;
+  font-size: 1.3rem;
+  margin-right: 1rem;
+}
+.form button {
+  padding: 1rem;
+  border: none;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 1.3rem;
+}
+.imageWrapper {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  position: relative
+}

jsconfig.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next.config.mjs ADDED Viewed

	@@ -0,0 +1,18 @@

+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+    images: {
+        remotePatterns: [
+            {
+                protocol: "https",
+                hostname: "replicate.com",
+            },
+            {
+                protocol: "https",
+                hostname: "replicate.delivery",
+            },
+        ],
+    },
+};
+export default nextConfig;

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,20 @@

+{
+  "name": "nextjs-replicate",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.1.0"
+  },
+  "devDependencies": {
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0"
+  }
+}

pages/api/predictions/[id].js ADDED Viewed

	@@ -0,0 +1,20 @@

+export default async function handler(req, res) {
+    const response = await fetch(
+      "https://api.replicate.com/v1/predictions/" + req.query.id,
+      {
+        headers: {
+          Authorization: `Token ${process.env.REPLICATE_API_TOKEN}`,
+          "Content-Type": "application/json",
+        },
+      }
+    );
+    if (response.status !== 200) {
+      let error = await response.json();
+      res.statusCode = 500;
+      res.end(JSON.stringify({ detail: error.detail }));
+      return;
+    }
+    const prediction = await response.json();
+    res.end(JSON.stringify(prediction));
+  }

pages/api/predictions/index.js ADDED Viewed

	@@ -0,0 +1,31 @@

+export default async function handler(req, res) {
+    const response = await fetch("https://api.replicate.com/v1/predictions", {
+      method: "POST",
+      headers: {
+        Authorization: `Token ${process.env.REPLICATE_API_TOKEN}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        // Pinned to a specific version of qwen-vl-chat
+        // See https://replicate.com/lucataco/qwen-vl-chat
+        version: process.env.MODEL_CODE,
+        // This is the text prompt that will be submitted by a form on the frontend
+        input: {
+            image: req.body.image,
+            prompt: req.body.prompt
+        },
+      }),
+    });
+    if (response.status !== 201) {
+      let error = await response.json();
+      res.statusCode = 500;
+      res.end(JSON.stringify({ detail: error.detail }));
+      return;
+    }
+    const prediction = await response.json();
+    res.statusCode = 201;
+    res.end(JSON.stringify(prediction));
+  }

public/next.svg ADDED Viewed

public/vercel.svg ADDED Viewed