Skip to content

Commit

Permalink
build(checkpoint): final form, server actions, reformatting
Browse files Browse the repository at this point in the history
  • Loading branch information
NemesisLW committed Jul 11, 2024
1 parent be5a5eb commit 5e4ef94
Show file tree
Hide file tree
Showing 12 changed files with 975 additions and 141 deletions.
3 changes: 2 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
SUPABASE_URL=<your-supabase-url>.supabase.co
SUPABASE_ANON_KEY=<your-anon-key>
NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_APP_URL=http://localhost:3000
REPLICATE_API_TOKEN=<your-replicate-api-token>
7 changes: 4 additions & 3 deletions app/(user)/generate/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { redirect } from "next/navigation";

import { createClient } from "@/lib/supabase/server";
import PickupLineInputForm from "@/components/pickupline-input-form";
import SignOutButton from "@/components/sign-out-button";

export default async function Page() {
const supabase = createClient();
Expand All @@ -23,12 +24,12 @@ export default async function Page() {
priority
/>
</div>
<div className="relative z-10 flex flex-col items-center justify-center w-full text-center p-8 md:p-12 lg:p-24">
<p>Hello {data.user.user_metadata.full_name}!</p>
<div className="relative z-10 flex w-full flex-col items-center justify-center p-8 text-center">
<SignOutButton />
<PickupLineInputForm />
</div>
{/* Semi-transparent overlay to ensure text readability */}
<div className="absolute inset-0 bg-white bg-opacity-80"></div>
<div className="absolute inset-0 bg-white bg-opacity-90"></div>
</div>
);
}
34 changes: 7 additions & 27 deletions app/alternate-landing/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import Image from "next/image";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import GenerateButton from "@/components/generate-cta-button";

function page() {
return (
<div className="flex flex-col items-center justify-center min-h-screen">
<main className="flex min-h-screen flex-col items-center justify-center">
<div className="absolute inset-0">
<Image
src="/background.png"
Expand All @@ -18,38 +19,17 @@ function page() {
/>
</div>
{/* Content Overlay */}
<div className="relative z-10 -left-4 -top-20 flex flex-col items-center justify-center w-full text-center gap-36 p-8 md:p-12 lg:p-48">
<div className="mb-12 lg:mb-24">
<h1 className="text-3xl md:text-4xl lg:text-5xl text-white leading-tight">
<div className="relative -left-2 z-10 flex w-full flex-col items-center justify-center gap-16 p-8 text-center md:gap-24 md:p-12 lg:-left-4 lg:-top-20 lg:gap-36 lg:p-48">
<div className="mb-12 mt-2 sm:mt-0 lg:mb-24">
<h1 className="text-2xl leading-tight text-white md:text-3xl lg:text-5xl">
Pickup Line
<br />
Generator
</h1>
</div>
<Button
asChild
className="h-12 w-[27%] px-4 py-2 md:px-6 md:py-3 text-base md:text-3xl text-white rounded-full hover:bg-rose-600 transition duration-300 shadow-xl mb-24"
>
<Link href="/generate">
<span className="flex items-center space-x-2">
<Image
src="/ph_heart-fill.svg"
width={16}
height={17}
alt="Heart"
/>
<span>Generate one for me</span>
<Image
src="/ph_heart-fill.svg"
width={16}
height={17}
alt="Heart"
/>
</span>
</Link>
</Button>
<GenerateButton />
</div>
</div>
</main>
);
}

Expand Down
29 changes: 2 additions & 27 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import Image from "next/image";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import GenerateButton from "@/components/generate-cta-button";

export default function Home() {
return (
Expand All @@ -19,38 +18,14 @@ export default function Home() {

{/* Content Overlay */}
<div className="relative -left-2 z-10 flex w-full flex-col items-center justify-center gap-16 p-8 text-center md:gap-24 md:p-12 lg:-left-4 lg:-top-20 lg:gap-36 lg:p-48">
{/* <div className="mb-12 lg:mb-24"> */}
<div className="mb-12 mt-2 sm:mt-0 lg:mb-24">
<h1 className="text-2xl leading-tight text-white md:text-3xl lg:text-5xl">
Pickup Line
<br />
Generator
</h1>
</div>
<Button
asChild
className="mb-24 h-8 w-[150px] rounded-full px-4 py-2 text-base text-white shadow-xl transition duration-300 hover:bg-rose-600 md:h-12 md:w-[200px] md:px-6 md:py-3 md:text-xl lg:w-[300px] lg:text-3xl"
>
<Link href="/generate">
<span className="flex items-center justify-center space-x-1 sm:space-x-2">
<Image
src="/ph_heart-fill.svg"
width={16}
height={17}
alt="Heart"
className="h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5"
/>
<span>Generate one for me</span>
<Image
src="/ph_heart-fill.svg"
width={16}
height={17}
alt="Heart"
className="h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5"
/>
</span>
</Link>
</Button>
<GenerateButton className="mb-24 w-[150px] md:w-[200px] lg:w-[300px]" />
</div>
</div>
</main>
Expand Down
46 changes: 46 additions & 0 deletions components/generate-cta-button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import Link from "next/link";
import { Button } from "./ui/button";
import Image from "next/image";
import { cn } from "@/lib/utils";

interface GenerateButtonProps {
className?: string;
text?: string;
}

function GenerateButton({
className,
text = "Generate one for me",
}: GenerateButtonProps) {
return (
<Button
asChild
className={cn(
className,
"h-8 rounded-full px-4 py-2 text-base text-white shadow-xl transition duration-300 hover:bg-rose-600 md:h-12 md:px-6 md:py-3 md:text-xl lg:text-3xl",
)}
>
<Link href="/generate">
<span className="flex items-center justify-center space-x-1 sm:space-x-2">
<Image
src="/ph_heart-fill.svg"
width={16}
height={17}
alt="Heart"
className="h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5"
/>
<span>{text}</span>
<Image
src="/ph_heart-fill.svg"
width={16}
height={17}
alt="Heart"
className="h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5"
/>
</span>
</Link>
</Button>
);
}

export default GenerateButton;
102 changes: 39 additions & 63 deletions components/pickupline-input-form.tsx
Original file line number Diff line number Diff line change
@@ -1,74 +1,50 @@
"use client";
import { Textarea } from "@/components/ui/textarea";
import { Input } from "@/components/ui/input";

import React, { useState } from "react";
import { redirect } from "next/navigation";

import SignOutButton from "@/components/sign-out-button";
import GenerateButton from "./generate-cta-button";

function PickupLineInputForm() {
const [crush, setCrush] = useState("");
const [style, setStyle] = useState("funny");

const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// Here you would typically send the data to an API
console.log({ crush, style });
// For now, we'll just simulate a redirect
redirect("/result");
};

const [style, setStyle] = useState("");
return (
<div className="min-h-screen bg-gradient-to-br from-pink-100 to-white p-4">
<div className="max-w-md mx-auto">
<header className="flex justify-between items-center mb-8">
<h1 className="text-3xl font-bold text-pink-600 font-pacifico">
Pickup Line Generator
</h1>
<SignOutButton />
</header>
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<label
htmlFor="crush"
className="block text-lg font-medium text-pink-700 mb-2"
>
Tell us about your crush
</label>
<textarea
id="crush"
value={crush}
onChange={(e) => setCrush(e.target.value)}
className="w-full p-3 border border-pink-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent"
rows={4}
placeholder="What makes them special?"
></textarea>
</div>
<div>
<label
htmlFor="style"
className="block text-lg font-medium text-pink-700 mb-2"
>
Style
</label>
<select
id="style"
value={style}
onChange={(e) => setStyle(e.target.value)}
className="w-full p-3 border border-pink-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent"
>
<option value="funny">Funny</option>
<option value="romantic">Romantic</option>
<option value="cheesy">Cheesy</option>
</select>
</div>
<button
type="submit"
className="w-full py-3 px-6 bg-pink-500 text-white rounded-full text-lg font-semibold hover:bg-pink-600 transition-colors"
<div className="mx-auto w-full max-w-lg rounded-md bg-transparent text-[#FF2157]">
<h1 className="mb-4 text-3xl leading-tight md:text-4xl lg:text-5xl">
Pickup Line Generator
</h1>

<form className="space-y-4">
<div>
<label
htmlFor="Crush"
className="mb-1 block text-left font-medium text-[#A5455C] text-muted-foreground"
>
Tell us about your crush
</label>
<Textarea
id="crush"
rows={4}
placeholder={"She is a 10 but...\nHe likes football...."}
className="w-full resize-none placeholder:text-[#DCDCDC] focus:outline-none focus:ring-0"
/>
</div>
<div>
<label
htmlFor="email"
className="mb-1 block text-left font-medium text-[#A5455C] text-muted-foreground"
>
♥ Generate for me ♥
</button>
</form>
</div>
Style
</label>
<Input
id="style"
type="text"
placeholder="eg: Funny"
className="w-full placeholder:text-[#DCDCDC] focus:outline-none focus:ring-0"
/>
</div>
<GenerateButton className="w-full" />
</form>
</div>
);
}
Expand Down
9 changes: 4 additions & 5 deletions components/sign-out-button.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
import React from "react";

import { signOut } from "@/lib/actions";

import { Button } from "./ui/button";
import { signOut } from "@/lib/supabase/actions";

function SignOutButton() {
return (
<form>
<form className="flex w-full justify-end px-4">
<Button
type="submit"
formAction={signOut}
className="px-4 py-2 bg-pink-200 text-pink-700 rounded-full hover:bg-pink-300 transition-colors"
className="h-8 w-16 rounded-3xl bg-[#B5002C]/[0.13] px-4 py-2 text-xl text-[#B5002C] transition-colors hover:bg-[#B5002C]/[0.2] md:h-12 md:w-24 md:text-3xl"
>
Sign out
Signout
</Button>
</form>
);
Expand Down
8 changes: 4 additions & 4 deletions components/user-auth-form.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, { Suspense } from "react";
import Image from "next/image";

import { login } from "@/lib/actions";
import { cn } from "@/lib/utils";

import { buttonVariants } from "./ui/button";
import { Login } from "@/lib/supabase/actions";

function UserAuthForm() {
return (
<form className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
<div className="flex flex-col space-y-4 text-center items-center">
<div className="flex flex-col items-center space-y-4 text-center">
<Image
src="/logo.svg"
alt="logo"
Expand All @@ -30,9 +30,9 @@ function UserAuthForm() {
type="submit"
className={cn(
buttonVariants({ variant: "default" }),
"bg-zinc-50 rounded-full text-black font-semibold"
"rounded-full bg-zinc-50 font-semibold text-black",
)}
formAction={login}
formAction={Login}
>
<Image
src="/google.svg"
Expand Down
41 changes: 41 additions & 0 deletions lib/ai/actions.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
"use server";

import { generateObject } from "ai";
import { z } from "zod";
import { createStreamableValue } from "ai/rsc";
import { CoreMessage, streamText } from "ai";
import { OpenAI } from "openai";
import { openai } from "@ai-sdk/openai";

const anyscale = new OpenAI({
baseURL: "https://api.endpoints.anyscale.com/v1",
apiKey: process.env.ANYSCALE_API_KEY!,
});

async function chat_complete() {
const completion = await anyscale.chat.completions.create({
model: "mistralai/Mixtral-8x22B-Instruct-v0.1",
messages: [],
temperature: 1,
max_tokens: 256,
top_p: 1,
frequency_penalty: 0,
});
console.log(completion);
}

export async function Generate(formData: FormData) {
const { object } = await generateObject({
model: openai("mistralai/Mixtral-8x22B-Instruct-v0.1"),
schema: z.object({
recipe: z.object({
name: z.string(),
ingredients: z.array(
z.object({ name: z.string(), amount: z.string() }),
),
steps: z.array(z.string()),
}),
}),
prompt: "Generate a lasagna recipe.",
});
}
Loading

0 comments on commit 5e4ef94

Please sign in to comment.