Rain/SBU-Hackathon
1
0
Fork 0
mirror of https://github.com/PinkSheep27/SBU-Hackathon.git synced 2026-10-11 00:50:27 -04:00
Code Issues Packages Projects Releases Wiki Activity

got rid of the excess whitespaces and added the maxOutputTokens into the GenerateConfig in the types.ts

Browse Source
This commit is contained in:
Ivan Rudik
2025-11-09 05:42:16 +00:00
parent 3686ae72da
commit 73668377bf
16 changed files with 366 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Dashboard/page.tsx
+2 -4
View File
@@ -21,8 +21,7 @@ export default function Dashboard() {
return ( return (
<div className="flex min-h-screen bg-zinc-50 dark:bg-black font-sans transition-all duration-300"> <div className="flex min-h-screen bg-zinc-50 dark:bg-black font-sans transition-all duration-300">
<aside <aside
className={`${ className={`${sideBarOpen ? "w-64" : "w-16"
sideBarOpen ? "w-64" : "w-16"
} bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 transition-all duration-300 flex flex-col`} } bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 transition-all duration-300 flex flex-col`}
> >
<div className="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800"> <div className="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800">
@@ -41,8 +40,7 @@ export default function Dashboard() {
</div> </div>
<nav <nav
className={`flex flex-col p-4 gap-3 text-zinc-700 dark:text-zinc-300 transition-opacity duration-200 ${ className={`flex flex-col p-4 gap-3 text-zinc-700 dark:text-zinc-300 transition-opacity duration-200 ${sideBarOpen ? "opacity-100" : "opacity-0"
sideBarOpen ? "opacity-100" : "opacity-0"
}`} }`}
> >
<Link <Link
app/api/chat/route.ts
+9 -9
View File
@@ -5,20 +5,20 @@ import { ChatHistory, ChatSetting } from "@/app/exportType/types";
export async function POST(request: Request) { export async function POST(request: Request) {
try { try {
const { userMessage, history , settings } = await request.json() as { const { userMessage, history, settings } = await request.json() as {
userMessage :string; userMessage: string;
history : ChatHistory; history: ChatHistory;
settings : ChatSetting; settings: ChatSetting;
}; };
const aiResponse = await chatToGemini(userMessage , history, settings); const aiResponse = await chatToGemini(userMessage, history, settings);
return NextResponse.json({response : aiResponse}); return NextResponse.json({ response: aiResponse });
} }
catch(error){ catch (error) {
console.error(error); console.error(error);
return NextResponse.json( return NextResponse.json(
{error: "Error with the model response "}, { error: "Error with the model response " },
{status : 500} { status: 500 }
); );
} }
} }
app/api/generate-idea/route.ts
+7 -7
View File
@@ -6,18 +6,18 @@ import { ChatSetting } from "@/app/exportType/types";
export async function POST(request: Request) { export async function POST(request: Request) {
try { try {
const { prompt, settings } = await request.json() as { const { prompt, settings } = await request.json() as {
prompt :string; prompt: string;
settings : ChatSetting; settings: ChatSetting;
}; };
const aiResponse = await chatToGemini(prompt , [], settings); const aiResponse = await chatToGemini(prompt, [], settings);
return NextResponse.json({response : aiResponse}); return NextResponse.json({ response: aiResponse });
} }
catch(error){ catch (error) {
console.error(error); console.error(error);
return NextResponse.json( return NextResponse.json(
{error: "Error with the model response "}, { error: "Error with the model response " },
{status : 500} { status: 500 }
); );
} }
} }
app/chatbot/page.tsx
+11 -11
View File
@@ -4,15 +4,15 @@ import { useState, useEffect, useRef, useCallback } from "react";
import { useSearchParams } from "next/navigation"; import { useSearchParams } from "next/navigation";
import ChatInput from "../utils/component/ui/ChatInput"; import ChatInput from "../utils/component/ui/ChatInput";
import MessageWindow from "../utils/component/ui/MessageWindow"; import MessageWindow from "../utils/component/ui/MessageWindow";
import { ChatHistory, ChatSetting, Message , MessageRole } from "@/app/exportType/types"; import { ChatHistory, ChatSetting, Message, MessageRole } from "@/app/exportType/types";
export default function Home(){ export default function Home() {
const [history, setHistory] = useState<ChatHistory>([]) const [history, setHistory] = useState<ChatHistory>([])
const historyRef = useRef<ChatHistory>([]); // Create a ref for history const historyRef = useRef<ChatHistory>([]); // Create a ref for history
const [settings] = useState<ChatSetting>({ const [settings] = useState<ChatSetting>({
temperature:1, temperature: 1,
model:"gemini-2.5-pro", model: "gemini-2.5-pro",
sysTemInstructions:"you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job" sysTemInstructions: "you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
}); });
const searchParams = useSearchParams(); const searchParams = useSearchParams();
@@ -22,17 +22,17 @@ export default function Home(){
historyRef.current = history; // Keep the ref updated with the latest history historyRef.current = history; // Keep the ref updated with the latest history
}, [history]); }, [history]);
const handleSend = useCallback(async(message:string)=>{ const handleSend = useCallback(async (message: string) => {
const newUserMessage:Message = { const newUserMessage: Message = {
role:"user", role: "user",
parts:[{text:message}], parts: [{ text: message }],
}; };
setHistory(prevHistory => { setHistory(prevHistory => {
const currentHistory = [...prevHistory, newUserMessage]; const currentHistory = [...prevHistory, newUserMessage];
const sendApiRequest = async () => { const sendApiRequest = async () => {
try{ try {
const response = await fetch("/api/chat", { const response = await fetch("/api/chat", {
method: "POST", method: "POST",
headers: { headers: {
@@ -129,7 +129,7 @@ export default function Home(){
return ( return (
<div className="flex flex-col py-32"> <div className="flex flex-col py-32">
<MessageWindow history={history} /> <MessageWindow history={history} />
<ChatInput onSend={handleSend} onOpenSettings={() => {}} /> <ChatInput onSend={handleSend} onOpenSettings={() => { }} />
</div> </div>
); );
} }
app/exportType/types.ts
+9 -8
View File
@@ -4,20 +4,21 @@ export type MessagePart = {
text: string; text: string;
} }
export interface Message{ export interface Message {
role: MessageRole; role: MessageRole;
parts:MessagePart[]; parts: MessagePart[];
} }
export type ChatHistory = Message[]; export type ChatHistory = Message[];
export interface GenerateConfig{ export interface GenerateConfig {
temperature : number; temperature: number;
topP : number; topP: number;
responseMimeType : string; responseMimeType: string;
maxOutputTokens?: number;
} }
export interface ChatSetting{ export interface ChatSetting {
temperature :number; temperature: number;
model: string; model: string;
sysTemInstructions: string; sysTemInstructions: string;
} }
app/formfile/generate-idea.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
// IMPORTANT: The GEMINI_API_KEY should be an environment variable. // IMPORTANT: The GEMINI_API_KEY should be an environment variable.
const apiKey = process.env.GEMINI_API_KEY; const apiKey = process.env.GEMINI_API_KEY;
if(!apiKey){ if (!apiKey) {
throw new Error("api key not found"); throw new Error("api key not found");
} }
const ai = new GoogleGenerativeAI(apiKey); const ai = new GoogleGenerativeAI(apiKey);
app/formfile/page.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ The output MUST be in Markdown format and strictly follow this structure:
**Concept:** [A concise, single paragraph description of the product and its primary function.]`, **Concept:** [A concise, single paragraph description of the product and its primary function.]`,
}); });
const parseAiResponse = (markdownString: string): CardData[] => { const parseAiResponse = (markdownString: string): CardData[] => {
console.log("Raw AI Response:", markdownString); console.log("Raw AI Response:", markdownString);
const ideas: CardData[] = []; const ideas: CardData[] = [];
const ideaBlocks = markdownString.split("### ").filter(block => block.trim() !== ""); const ideaBlocks = markdownString.split("### ").filter(block => block.trim() !== "");
@@ -69,7 +69,7 @@ const parseAiResponse = (markdownString: string): CardData[] => {
}); });
console.log("Parsed Cards:", ideas); console.log("Parsed Cards:", ideas);
return ideas; return ideas;
}; };
const handleFormSubmitFromFormPage = (submittedData: FormData) => { const handleFormSubmitFromFormPage = (submittedData: FormData) => {
setFormData(submittedData); setFormData(submittedData);
app/globals.css
+9 -10
View File
@@ -1,6 +1,3 @@
/* 1. Import BOTH fonts in one go */
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Pixelify+Sans:wght@400;700&display=swap');
@import "tailwindcss"; @import "tailwindcss";
:root { :root {
@@ -14,12 +11,9 @@
/* 3. Assign fonts to Tailwind's theme */ /* 3. Assign fonts to Tailwind's theme */
/* --font-sans is for regular text (Concert One) */ /* Tell Tailwind to use the variables already defined in app/layout.tsx */
--font-sans: var(--font-concert-one); --font-sans: var(--font-sans);
--font-header: var(--font-header);
/* We add a new font family for headers (Pixelify Sans) */
/* This also creates a 'font-header' utility class */
--font-header: var(--font-pixelify);
--font-mono: var(--font-geist-mono); --font-mono: var(--font-geist-mono);
} }
@@ -40,6 +34,11 @@ body {
} }
/* 5. (Optional but helpful) Apply header font to h-tags by default */ /* 5. (Optional but helpful) Apply header font to h-tags by default */
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-header); font-family: var(--font-header);
} }
app/layout.tsx
-2
View File
@@ -1,5 +1,3 @@
// app/layout.tsx
import type { Metadata } from "next"; import type { Metadata } from "next";
// 1. Import your two new fonts // 1. Import your two new fonts
import { Concert_One, Pixelify_Sans } from "next/font/google"; import { Concert_One, Pixelify_Sans } from "next/font/google";
app/page.tsx
+110 -110
View File
@@ -7,121 +7,121 @@ import ProtectedNavButton from "../components/ProtectedNavButton";
import Link from 'next/link'; import Link from 'next/link';
export default function Page() { export default function Page() {
  return ( return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black"> <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
      <header className="absolute top-6 left-8 right-8 flex items-center justify-between text-sm font-medium text-zinc-700 dark:text-zinc-300"> <header className="absolute top-6 left-8 right-8 flex items-center justify-between text-sm font-medium text-zinc-700 dark:text-zinc-300">
        <Image <Image
          className="" className=""
          src="/logo.svg" src="/logo.svg"
          alt="logo" alt="logo"
          width={100} width={100}
          height={20} height={20}
          priority priority
        /> />
        <div  className="flex items-center gap-4"> <div className="flex items-center gap-4">
          <Link href = "/auth/login" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> <Link href="/auth/login" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            Sign in Sign in
          </Link> </Link>
          <Link href = "/auth/logout" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"> <Link href="/auth/logout" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
            Log out Log out
          </Link> </Link>
        </div> </div>
      </header> </header>
      <main className="flex min-h-screen w-full flex-col justify-between py-32 px-16 bg-white dark:bg-black"> <main className="flex min-h-screen w-full flex-col justify-between py-32 px-16 bg-white dark:bg-black">
        <div className="flex flex-col sm:flex-row items-start justify-between gap-12 text-left w-full"> <div className="flex flex-col sm:flex-row items-start justify-between gap-12 text-left w-full">
          
          <div className="flex-1 flex flex-col gap-5 justify-center">
            <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
              (project name)
            </h1>
            <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
              Looking for a starting point or more instructions? Head over to{" "}
              <Link
                href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
                className="font-medium text-zinc-950 dark:text-zinc-50"
              >
                Templates
              </Link>{" "}
              or the{" "}
              <Link
                href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
                className="font-medium text-zinc-950 dark:text-zinc-50"
              >
                Learning
              </Link>{" "}
              center.
            </p>
            <ProtectedNavButton>Get Started</ProtectedNavButton> <div className="flex-1 flex flex-col gap-5 justify-center">
          </div> <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
(project name)
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<Link
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</Link>{" "}
or the{" "}
<Link
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</Link>{" "}
center.
</p>
          <div className="flex-1 flex justify-center"> <ProtectedNavButton>Get Started</ProtectedNavButton>
            <div className="w-full max-w-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500"> </div>
              Image Placeholder
            </div>
          </div>
        </div>
        <section className="mt-32 w-full flex flex-col items-start gap-12"> <div className="flex-1 flex justify-center">
          <div> <div className="w-full max-w-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
            <h2 className="text-[28px] font-semibold text-black dark:text-zinc-50 leading-9"> Image Placeholder
              Guide: </div>
            </h2> </div>
          </div> </div>
          <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full"> <section className="mt-32 w-full flex flex-col items-start gap-12">
            <div className="w-full max-w-xl"> <div>
              <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2"> <h2 className="text-[28px] font-semibold text-black dark:text-zinc-50 leading-9">
                First Text Block Guide:
              </h2> </h2>
              <p className="text-lg text-zinc-600 dark:text-zinc-400"> </div>
                This is the content for the first text block. You can write anything here.
              </p>
            </div>
            <div className="sm:w-1/2 flex justify-center items-center">
              <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
                Image Placeholder
              </div>
            </div>
          </div>
          
          <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
            <div className="sm:w-1/2 flex justify-center items-center">
              <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
                Image Placeholder
              </div>
            </div>
            <div className="flex w-full justify-end"> <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
              <div className="w-full max-w-xl"> <div className="w-full max-w-xl">
                <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2"> <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
                  Second Text Block First Text Block
                </h2> </h2>
                <p className="text-lg text-zinc-600 dark:text-zinc-400"> <p className="text-lg text-zinc-600 dark:text-zinc-400">
                  This is the content for the second text block. You can write anything here. This is the content for the first text block. You can write anything here.
                </p> </p>
              </div> </div>
            </div> <div className="sm:w-1/2 flex justify-center items-center">
          </div> <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
Image Placeholder
</div>
</div>
</div>
          <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full"> <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
            <div className="w-full max-w-xl"> <div className="sm:w-1/2 flex justify-center items-center">
              <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2"> <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
                Third Text Block Image Placeholder
              </h2> </div>
              <p className="text-lg text-zinc-600 dark:text-zinc-400"> </div>
                This is the content for the third text block. You can write anything here.
              </p> <div className="flex w-full justify-end">
            </div> <div className="w-full max-w-xl">
            <div className="sm:w-1/2 flex justify-center items-center"> <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
              <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500"> Second Text Block
                  Image Placeholder </h2>
              </div> <p className="text-lg text-zinc-600 dark:text-zinc-400">
            </div> This is the content for the second text block. You can write anything here.
          </div> </p>
        </section> </div>
      </main> </div>
    </div> </div>
  );
<div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
<div className="w-full max-w-xl">
<h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
Third Text Block
</h2>
<p className="text-lg text-zinc-600 dark:text-zinc-400">
This is the content for the third text block. You can write anything here.
</p>
</div>
<div className="sm:w-1/2 flex justify-center items-center">
<div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
Image Placeholder
</div>
</div>
</div>
</section>
</main>
</div>
);
} }
app/utils/component/ui/ChatInput.tsx
+1 -2
View File
@@ -77,8 +77,7 @@ export default function ChatInput({ onSend, onOpenSettings }: ChatInputProps) {
<button <button
className={` className={`
p-2 rounded-full transition-all p-2 rounded-full transition-all
${ ${message.trim()
message.trim()
? "bg-purple-600 text-white hover:bg-purple-700" ? "bg-purple-600 text-white hover:bg-purple-700"
: "bg-gray-200 text-gray-400 cursor-not-allowed" : "bg-gray-200 text-gray-400 cursor-not-allowed"
} }
app/utils/component/ui/MessageWindow.tsx
+9 -9
View File
@@ -1,30 +1,30 @@
"use client"; "use client";
import { useRef, useEffect } from "react"; import { useRef, useEffect } from "react";
import { ChatHistory } from "@/app/exportType/types"; import { ChatHistory } from "@/app/exportType/types";
import {User, Bot} from "lucide-react" import { User, Bot } from "lucide-react"
interface MessageWindowProps{ interface MessageWindowProps {
history :ChatHistory history: ChatHistory
} }
export default function MessageWindow({history}:MessageWindowProps){ export default function MessageWindow({ history }: MessageWindowProps) {
const messageEndRef = useRef<HTMLDivElement>(null); const messageEndRef = useRef<HTMLDivElement>(null);
useEffect(() =>{ useEffect(() => {
messageEndRef.current?.scrollIntoView({behavior:"smooth"}); messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
}, [history]); }, [history]);
return( return (
<div className="flex-1 p-3 overflow-y-auto"> <div className="flex-1 p-3 overflow-y-auto">
<div className="max-w-3xl mx-auto"> <div className="max-w-3xl mx-auto">
{history.map((msg,index)=>{ {history.map((msg, index) => {
const isUser = msg.role === "user" const isUser = msg.role === "user"
return ( return (
<div <div
key={index} key={index}
className={`flex ${isUser ? "justify-end" : "justify-start"}`}> className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
{!isUser &&( {!isUser && (
<div className="mr-2"> <div className="mr-2">
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray"> <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray">
<Bot size={15} className="text-gray-700"> <Bot size={15} className="text-gray-700">
app/utils/geminiHelper.ts
+12 -12
View File
@@ -1,27 +1,27 @@
import { GoogleGenerativeAI } from "@google/generative-ai"; import { GoogleGenerativeAI } from "@google/generative-ai";
import { ChatHistory, GenerateConfig,ChatSetting } from "../exportType/types"; import { ChatHistory, GenerateConfig, ChatSetting } from "../exportType/types";
const apiKey = process.env.GEMINI_API_KEY; const apiKey = process.env.GEMINI_API_KEY;
if(!apiKey){ if (!apiKey) {
throw new Error("api key not found"); throw new Error("api key not found");
} }
const genAI = new GoogleGenerativeAI(apiKey); const genAI = new GoogleGenerativeAI(apiKey);
export async function chatToGemini( export async function chatToGemini(
userMessage:string , userMessage: string,
history:ChatHistory, history: ChatHistory,
settings:ChatSetting settings: ChatSetting
):Promise<string>{ ): Promise<string> {
const model = genAI.getGenerativeModel({ const model = genAI.getGenerativeModel({
model:settings.model || "gemini-2.5-flash", model: settings.model || "gemini-2.5-flash",
systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail", systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
}); });
const generationConfig:GenerateConfig = { const generationConfig: GenerateConfig = {
temperature : settings.temperature || 1, temperature: settings.temperature || 1,
topP : 0.9, topP: 0.9,
responseMimeType: "text/plain", responseMimeType: "text/plain",
maxOutputTokens: 1900, // Increased to allow for longer responses maxOutputTokens: 1900, // Increased to allow for longer responses
} }
@@ -35,8 +35,8 @@ export async function chatToGemini(
const result = await chatSession.sendMessage(userMessage); const result = await chatSession.sendMessage(userMessage);
return result.response.text(); return result.response.text();
} }
catch(error){ catch (error) {
console.error(error) console.error(error)
throw error throw error
} }
} }