Skip to content

Commit

Permalink
init
Browse files Browse the repository at this point in the history
  • Loading branch information
rodgetech committed May 8, 2024
0 parents commit 778c726
Show file tree
Hide file tree
Showing 23 changed files with 5,555 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
36 changes: 36 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# 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
36 changes: 36 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
Binary file added app/favicon.ico
Binary file not shown.
76 changes: 76 additions & 0 deletions app/globals.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;

--radius: 0.5rem;
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
22 changes: 22 additions & 0 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
85 changes: 85 additions & 0 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
"use client";

import { EnterGuess } from "@/components/enter-guess";
import { GeneratingScore } from "@/components/generating-score";
import { YourScore } from "@/components/your-score";
import { useEffect, useState } from "react";

export type OrginalGuess = {
imageUrl: string;
hints: string[];
prompt: string;
};

export type GuessScore = {
generatedImage: string;
score: number;
};

export default function Home() {
const [userPrompt, setUserPrompt] = useState("");
const [originalGuess, setOriginalGuess] = useState<OrginalGuess>();
const [guessScore, setGuessScore] = useState<GuessScore>();
const [generating, setGenerating] = useState(false);

const handleSubmit = async (prompt: string) => {
setGenerating(true);
setUserPrompt(prompt);
const response = await fetch(
process.env.NEXT_PUBLIC_GET_SCORE_WORKFLOW as string,
{
method: "POST",
body: JSON.stringify({
guessedPrompt: prompt,
originalPrompt: originalGuess?.prompt,
}),
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
}
);
const data = await response.json();
setGuessScore(data);
setGenerating(false);
};

const fetchData = async () => {
try {
const response = await fetch(
process.env.NEXT_PUBLIC_GET_RANDOM_PROMPT_WORKFLOW as string
);
const data = await response.json();
console.log(data);
setOriginalGuess(data);
} catch (error) {
console.error("Failed to fetch data:", error);
}
};

const reset = () => {
setUserPrompt("");
setOriginalGuess(undefined);
setGuessScore(undefined);
fetchData();
};

useEffect(() => {
fetchData();
}, []);

if (generating)
return <GeneratingScore originalImage={originalGuess!.imageUrl} />;

if (guessScore)
return (
<YourScore
score={guessScore!}
originalGuess={originalGuess!}
userPrompt={userPrompt}
reset={reset}
/>
);

return <EnterGuess onSubmit={handleSubmit} originalGuess={originalGuess} />;
}
17 changes: 17 additions & 0 deletions components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
79 changes: 79 additions & 0 deletions components/enter-guess.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/**
* This code was generated by v0 by Vercel.
* @see https://v0.dev/t/Vz30LKzXEsL
*/
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { OrginalGuess } from "@/app/page";
import { useState } from "react";
import { ReloadIcon } from "@radix-ui/react-icons";

type Props = {
onSubmit: (text: string) => void;
originalGuess?: OrginalGuess;
};

export function EnterGuess({ onSubmit, originalGuess }: Props) {
const [inputValue, setInputValue] = useState("");

const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
setInputValue(event.target.value);
};

const handleSubmit = () => {
onSubmit(inputValue);
};
return (
<div className="flex h-screen w-full items-center justify-center bg-white p-8">
<div className="flex max-w-4xl flex-wrap items-center justify-center gap-8">
<div className="flex w-full justify-center">
<h1 className="text-3xl font-bold">Guess the prompt</h1>
</div>
<div className="grid grid-cols-2 gap-8 w-full">
<div className="relative">
{!originalGuess?.imageUrl && (
<ReloadIcon
className="absolute z-10 h-8 w-8 animate-spin text-slate-800"
style={{
top: "50%",
left: "50%",
}}
/>
)}
<img
className="h-[400px] w-[600px] object-cover"
height="400"
src={originalGuess?.imageUrl || "/placeholder.svg"}
style={{
aspectRatio: "600/400",
objectFit: "cover",
}}
width="600"
/>
</div>
<div className="flex flex-col items-start space-y-4">
<p className="text-sm">
Can you guess the prompt used to generate this image?
</p>
<Textarea
className="h-24 w-full resize-none rounded-md border p-2"
placeholder="Guess the prompt used to generate the image"
value={inputValue}
onChange={handleInputChange}
/>
{originalGuess?.hints && (
<p className="text-sm">Hints: {originalGuess?.hints.join()}</p>
)}
<Button
className="mt-2 w-full"
onClick={handleSubmit}
disabled={!originalGuess}
>
Submit
</Button>
</div>
</div>
</div>
</div>
);
}
Loading

0 comments on commit 778c726

Please sign in to comment.