Skip to content

Commit fd4ba55

Browse files
NutlopeNutlope
committed
changed OG, increased context limit, working on the screenshot, defaulting to shadcn
1 parent 9375f83 commit fd4ba55

7 files changed

Lines changed: 3457 additions & 1481 deletions

File tree

‎app/(main)/actions.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@ export async function getNextCompletionStreamPromise(
205205
messages: messages.map((m) => ({ role: m.role, content: m.content })),
206206
stream: true,
207207
temperature: 0.2,
208-
max_tokens: 6000,
208+
max_tokens: 9000,
209209
});
210210

211211
resolve(res.toReadableStream());

‎app/(main)/page.tsx‎

Lines changed: 60 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @next/next/no-img-element */
12
"use client";
23

34
import Fieldset from "@/components/fieldset";
@@ -19,6 +20,9 @@ import TextareaAutosize from "react-textarea-autosize";
1920
import { createChat, getNextCompletionStreamPromise } from "./actions";
2021
import { Context } from "./providers";
2122
import Header from "@/components/header";
23+
import { useS3Upload } from "next-s3-upload";
24+
import UploadIcon from "@/components/icons/upload-icon";
25+
import { XCircleIcon } from "@heroicons/react/20/solid";
2226

2327
const MODELS = [
2428
{
@@ -84,8 +88,22 @@ export default function Home() {
8488
const [prompt, setPrompt] = useState("");
8589
const [model, setModel] = useState(MODELS[0].value);
8690
const [quality, setQuality] = useState("high");
91+
const [imageUrl, setImageUrl] = useState<string | undefined>(
92+
"https://napkinsdev.s3.us-east-1.amazonaws.com/next-s3-uploads/37ba6e68-3ddf-412a-9507-c52fbdee1ace/CleanShot-2025-01-07-at-10.31.33-2x.png",
93+
);
8794

8895
const selectedModel = MODELS.find((m) => m.value === model);
96+
const { uploadToS3 } = useS3Upload();
97+
98+
const handleFileChange = async (event: any) => {
99+
let file = event.target.files[0];
100+
let objectUrl = URL.createObjectURL(file);
101+
setImageUrl(objectUrl);
102+
const { url } = await uploadToS3(file);
103+
setImageUrl(url);
104+
};
105+
106+
console.log({ imageUrl });
89107

90108
return (
91109
<div className="relative flex grow flex-col">
@@ -147,6 +165,20 @@ export default function Home() {
147165
}}
148166
>
149167
<Fieldset>
168+
{imageUrl && (
169+
<div className="relative bg-gray-500">
170+
<div className="rounded-xl">
171+
<img
172+
alt="screenshot"
173+
src={imageUrl}
174+
className="group relative mb-2 h-16 w-[68px] rounded"
175+
/>
176+
</div>
177+
<button className="absolute -right-3 -top-4 left-14 z-10 size-5 rounded-full bg-white text-gray-900 hover:text-gray-500">
178+
<XCircleIcon onClick={() => setImageUrl("")} />
179+
</button>
180+
</div>
181+
)}
150182
<div className="relative flex rounded-xl border-4 border-gray-300 bg-white pb-10">
151183
<TextareaAutosize
152184
placeholder="Build me a budgeting app..."
@@ -209,7 +241,7 @@ export default function Home() {
209241

210242
<div className="h-4 w-px bg-gray-200 max-sm:hidden" />
211243

212-
<label className="inline-flex items-center gap-2 text-sm text-gray-400">
244+
{/* <label className="inline-flex items-center gap-2 text-sm text-gray-400">
213245
<span className="sm:hidden">shad</span>
214246
<span className="max-sm:hidden">
215247
shadcn<span className="font-medium">/</span>ui
@@ -219,7 +251,7 @@ export default function Home() {
219251
</Switch>
220252
</label>
221253
222-
<div className="h-4 w-px bg-gray-200 max-sm:hidden" />
254+
<div className="h-4 w-px bg-gray-200 max-sm:hidden" /> */}
223255

224256
<Select.Root
225257
name="quality"
@@ -246,7 +278,10 @@ export default function Home() {
246278
<Select.Viewport className="space-y-1 p-2">
247279
{[
248280
{ value: "low", label: "Low quality [faster]" },
249-
{ value: "high", label: "High quality [slower]" },
281+
{
282+
value: "high",
283+
label: "High quality [slower]",
284+
},
250285
].map((q) => (
251286
<Select.Item
252287
key={q.value}
@@ -267,10 +302,31 @@ export default function Home() {
267302
</Select.Content>
268303
</Select.Portal>
269304
</Select.Root>
305+
<div className="h-4 w-px bg-gray-200 max-sm:hidden" />
306+
<div>
307+
<label
308+
htmlFor="fileInput"
309+
className="flex cursor-pointer gap-2 text-sm text-gray-400 hover:underline"
310+
>
311+
<div className="flex size-6 items-center justify-center rounded bg-blue-400">
312+
<UploadIcon className="size-4" />
313+
</div>
314+
<div className="flex items-center justify-center">
315+
Attach
316+
</div>
317+
</label>
318+
<input
319+
id="fileInput"
320+
type="file"
321+
onChange={handleFileChange}
322+
className="hidden"
323+
/>
324+
</div>
270325
</div>
271326

272327
<div className="relative flex shrink-0 has-[:disabled]:opacity-50">
273-
<div className="pointer-events-none absolute inset-0 -bottom-[1px] rounded bg-blue-700" />
328+
<div className="pointer-events-none absolute inset-0 -bottom-[1px] rounded bg-blue-500" />
329+
274330
<LoadingButton
275331
className="relative inline-flex size-6 items-center justify-center rounded bg-blue-500 font-medium text-white shadow-lg outline-blue-300 hover:bg-blue-500/75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
276332
type="submit"
@@ -279,7 +335,6 @@ export default function Home() {
279335
</LoadingButton>
280336
</div>
281337
</div>
282-
283338
<LoadingMessage />
284339
</div>
285340
<div className="mt-4 flex w-full flex-wrap justify-center gap-3">

‎app/api/s3-upload/route.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
// app/api/s3-upload/route.js
2+
export { POST } from "next-s3-upload/route";

‎components/icons/upload-icon.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ComponentProps } from "react";
2+
3+
export default function UploadIcon(props: ComponentProps<"svg">) {
4+
return (
5+
<svg
6+
height={10}
7+
width={10}
8+
viewBox="0 0 8.4666664 8.4666664"
9+
xmlns="http://www.w3.org/2000/svg"
10+
{...props}
11+
>
12+
<path
13+
d="M5.465 289.749c-.91-.019-1.849.503-2.106 1.678-1.048-.357-1.994.348-1.896 1.475a1.493 1.493 0 00-.934 1.387c0 .829.668 1.496 1.497 1.496h1.818l-.002-1.706-.426.155c-.31.133-.538-.257-.273-.5l.807-.783c.184-.184.404-.163.567 0l.807.784c.265.242.036.632-.273.499l-.426-.155v1.706H6.44c.829 0 1.496-.667 1.496-1.496 0-.61-.362-1.132-.883-1.365 1.01-1.97-.259-3.149-1.589-3.175z"
14+
fill="#fff"
15+
transform="translate(0 -288.533)"
16+
/>
17+
<path
18+
d="M5.465 289.748c-.05 0-.106.001-.157.003-1.162 1.832.634 3.172 1.746 3.172 1.01-1.97-.259-3.148-1.589-3.175z"
19+
fill="#fff"
20+
transform="translate(0 -288.533)"
21+
/>
22+
</svg>
23+
);
24+
}

0 commit comments

Comments
 (0)