downscale pre-ai
This commit is contained in:
@@ -17,13 +17,47 @@
|
||||
let description: string | undefined = $state();
|
||||
let isGenerating = $state(false);
|
||||
|
||||
async function onSelect(file: File) {
|
||||
async function resizeImage(
|
||||
file: File,
|
||||
maxWidth = 300,
|
||||
maxHeight = 300,
|
||||
quality = 0.8
|
||||
): Promise<File> {
|
||||
const bitmap = await createImageBitmap(file);
|
||||
|
||||
let { width, height } = bitmap;
|
||||
|
||||
const scale = Math.min(maxWidth / width, maxHeight / height, 1);
|
||||
|
||||
width = Math.round(width * scale);
|
||||
height = Math.round(height * scale);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
const ctx = canvas.getContext("2d")!;
|
||||
ctx.drawImage(bitmap, 0, 0, width, height);
|
||||
|
||||
const blob = await new Promise<Blob>((resolve) =>
|
||||
canvas.toBlob((blob) => resolve(blob!), "image/jpeg", quality)
|
||||
);
|
||||
|
||||
return new File([blob], file.name, {
|
||||
type: "image/jpeg",
|
||||
lastModified: Date.now()
|
||||
});
|
||||
}
|
||||
|
||||
async function onSelect(file: File) {
|
||||
isGenerating = true;
|
||||
|
||||
const base64 = await fileToBase64(file);
|
||||
const resized = await resizeImage(file, 300, 300, 0.8);
|
||||
|
||||
const base64 = await fileToBase64(resized);
|
||||
|
||||
description = await genDescription(base64);
|
||||
|
||||
isGenerating = false;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import { Checkbox } from '$lib/components/ui/checkbox/index.js';
|
||||
import * as Field from '$lib/components/ui/field/index.js';
|
||||
import { Input } from '$lib/components/ui/input/index.js';
|
||||
import * as Select from '$lib/components/ui/select/index.js';
|
||||
import { Textarea } from '$lib/components/ui/textarea/index.js';
|
||||
import ImageUpload from '$lib/components/custom/image-upload/image-upload.svelte';
|
||||
|
||||
let month = $state<string>();
|
||||
let year = $state<string>();
|
||||
</script>
|
||||
|
||||
<div class="w-full max-w-lg mt-8">
|
||||
<form>
|
||||
<Field.Group>
|
||||
<Field.Set>
|
||||
<Field.Legend>Submit Found Item</Field.Legend>
|
||||
<Field.Description
|
||||
>Your item will need to be approved before becoming public
|
||||
</Field.Description>
|
||||
<Field.Group>
|
||||
<Field.Field>
|
||||
<Field.Label for="image-upload">
|
||||
Image
|
||||
</Field.Label>
|
||||
<ImageUpload></ImageUpload>
|
||||
</Field.Field>
|
||||
<Field.Field>
|
||||
<Field.Label for="checkout-7j9-card-name-43j"
|
||||
>Name on Card
|
||||
</Field.Label
|
||||
>
|
||||
<Input
|
||||
id="checkout-7j9-card-name-43j"
|
||||
placeholder="John Doe"
|
||||
required
|
||||
/>
|
||||
</Field.Field>
|
||||
<div class="grid grid-cols-3 gap-4">
|
||||
<Field.Field class="col-span-2">
|
||||
<Field.Label for="checkout-7j9-card-number-uw1">
|
||||
Card Number
|
||||
</Field.Label>
|
||||
<Input
|
||||
id="checkout-7j9-card-number-uw1"
|
||||
placeholder="1234 5678 9012 3456"
|
||||
required
|
||||
/>
|
||||
<Field.Description>Enter your 16-digit number.</Field.Description>
|
||||
</Field.Field>
|
||||
<Field.Field class="col-span-1">
|
||||
<Field.Label for="checkout-7j9-cvv">CVV</Field.Label>
|
||||
<Input id="checkout-7j9-cvv" placeholder="123" required />
|
||||
</Field.Field>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<Field.Field>
|
||||
<Field.Label for="checkout-7j9-exp-month-ts6">Month</Field.Label>
|
||||
<Select.Root type="single" bind:value={month}>
|
||||
<Select.Trigger id="checkout-7j9-exp-month-ts6">
|
||||
<span>
|
||||
{month || "MM"}
|
||||
</span>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="01">01</Select.Item>
|
||||
<Select.Item value="02">02</Select.Item>
|
||||
<Select.Item value="03">03</Select.Item>
|
||||
<Select.Item value="04">04</Select.Item>
|
||||
<Select.Item value="05">05</Select.Item>
|
||||
<Select.Item value="06">06</Select.Item>
|
||||
<Select.Item value="07">07</Select.Item>
|
||||
<Select.Item value="08">08</Select.Item>
|
||||
<Select.Item value="09">09</Select.Item>
|
||||
<Select.Item value="10">10</Select.Item>
|
||||
<Select.Item value="11">11</Select.Item>
|
||||
<Select.Item value="12">12</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Field.Field>
|
||||
<Field.Field>
|
||||
<Field.Label for="checkout-7j9-exp-year-f59">Year</Field.Label>
|
||||
<Select.Root type="single" bind:value={year}>
|
||||
<Select.Trigger id="checkout-7j9-exp-year-f59">
|
||||
<span>
|
||||
{year || "YYYY"}
|
||||
</span>
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Item value="2024">2024</Select.Item>
|
||||
<Select.Item value="2025">2025</Select.Item>
|
||||
<Select.Item value="2026">2026</Select.Item>
|
||||
<Select.Item value="2027">2027</Select.Item>
|
||||
<Select.Item value="2028">2028</Select.Item>
|
||||
<Select.Item value="2029">2029</Select.Item>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</Field.Field>
|
||||
</div>
|
||||
</Field.Group>
|
||||
</Field.Set>
|
||||
<Field.Separator />
|
||||
<Field.Set>
|
||||
<Field.Legend>Billing Address</Field.Legend>
|
||||
<Field.Description>
|
||||
The billing address associated with your payment method
|
||||
</Field.Description>
|
||||
<Field.Group>
|
||||
<Field.Field orientation="horizontal">
|
||||
<Checkbox id="checkout-7j9-same-as-shipping-wgm" checked={true} />
|
||||
<Field.Label
|
||||
for="checkout-7j9-same-as-shipping-wgm"
|
||||
class="font-normal"
|
||||
>
|
||||
Same as shipping address
|
||||
</Field.Label>
|
||||
</Field.Field>
|
||||
</Field.Group>
|
||||
</Field.Set>
|
||||
<Field.Separator />
|
||||
<Field.Set>
|
||||
<Field.Group>
|
||||
<Field.Field>
|
||||
<Field.Label for="checkout-7j9-optional-comments"
|
||||
>Comments
|
||||
</Field.Label
|
||||
>
|
||||
<Textarea
|
||||
id="checkout-7j9-optional-comments"
|
||||
placeholder="Add any additional comments"
|
||||
class="resize-none"
|
||||
/>
|
||||
</Field.Field>
|
||||
</Field.Group>
|
||||
</Field.Set>
|
||||
<Field.Field orientation="horizontal">
|
||||
<Button type="submit">Submit</Button>
|
||||
<Button variant="outline" type="button">Cancel</Button>
|
||||
</Field.Field>
|
||||
</Field.Group>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,21 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { Button } from '$lib/components/ui/button/index.js';
|
||||
import { Toaster } from '$lib/components/ui/sonner';
|
||||
</script>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onclick={() =>
|
||||
toast("Event has been created", {
|
||||
description: "Sunday, December 03, 2023 at 9:00 AM",
|
||||
action: {
|
||||
label: "Undo",
|
||||
onClick: () => console.info("Undo")
|
||||
}
|
||||
})}
|
||||
>
|
||||
Show Toast
|
||||
</Button>
|
||||
|
||||
<Toaster></Toaster>
|
||||
Reference in New Issue
Block a user