JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: sending base64 image to backend

Browse Source 
This is silly, but binary is apparently hard to do????
This commit is contained in:
John Costa
2025-03-08 12:30:16 +00:00
parent d212584486
commit bf07c18fd7
5 changed files with 93 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/ImageViewer.tsx
View File

@@ -9,11 +9,13 @@ export function ImageViewer() {
createEffect(() => {
// Listen for PNG processing events
const unlisten = listen("png-processed", (event) => {
console.log("Received processed PNG");
console.log("Received processed PNG", event);
const base64Data = event.payload as string;
setLatestImage(`data:image/png;base64,${base64Data}`);
sendImage("test-image.png", base64Data);
const urlImage = `data:image/png;base64,${base64Data}`;
setLatestImage(urlImage);
sendImage("test-image.png", urlImage);
});
return () => {

140
frontend/src/network/index.ts
View File

@@ -1,97 +1,97 @@
import {
array,
InferOutput,
null as Null,
nullable,
object,
parse,
pipe,
string,
uuid,
array,
InferOutput,
null as Null,
nullable,
object,
parse,
pipe,
string,
uuid,
} from "valibot";
type BaseRequestParams = Partial<{
path: string;
body: RequestInit["body"];
method: "GET" | "POST";
path: string;
body: RequestInit["body"];
method: "GET" | "POST";
}>;
const getBaseRequest = ({ path, body, method }: BaseRequestParams): Request => {
return new Request(`http://localhost:3040/${path}`, {
headers: { userId: "fcc22dbb-7792-4595-be8e-d0439e13990a" },
body,
method,
});
return new Request(`http://localhost:3040/${path}`, {
headers: { userId: "fcc22dbb-7792-4595-be8e-d0439e13990a" },
body,
method,
});
};
const sendImageResponseValidator = object({
ID: pipe(string(), uuid()),
ImageID: pipe(string(), uuid()),
UserID: pipe(string(), uuid()),
ID: pipe(string(), uuid()),
ImageID: pipe(string(), uuid()),
UserID: pipe(string(), uuid()),
});
export const sendImage = async (
imageName: string,
image: BlobPart,
imageName: string,
image: BlobPart,
): Promise<InferOutput<typeof sendImageResponseValidator>> => {
const data = new Blob([image]);
const request = getBaseRequest({
path: `image/${imageName}`,
body: data,
method: "POST",
});
const data = new Blob([image]);
const request = getBaseRequest({
path: `image/${imageName}`,
body: data,
method: "POST",
});
request.headers.set("Content-Type", "aplication/oclet-stream");
request.headers.set("Content-Type", "aplication/base64");
const res = await fetch(request).then((res) => res.json());
const res = await fetch(request).then((res) => res.json());
return parse(sendImageResponseValidator, res);
return parse(sendImageResponseValidator, res);
};
const getUserImagesResponseValidator = array(
object({
ID: pipe(string(), uuid()),
Image: object({
ID: pipe(string(), uuid()),
ImageName: string(),
Image: Null(),
}),
Tags: nullable(
array(
object({
ID: pipe(string(), uuid()),
Tag: string(),
ImageID: pipe(string(), uuid()),
}),
),
),
Links: nullable(
array(
object({
ID: pipe(string(), uuid()),
Links: string(),
ImageID: pipe(string(), uuid()),
}),
),
),
Text: nullable(
array(
object({
ID: pipe(string(), uuid()),
ImageText: string(),
ImageID: pipe(string(), uuid()),
}),
),
),
}),
object({
ID: pipe(string(), uuid()),
Image: object({
ID: pipe(string(), uuid()),
ImageName: string(),
Image: Null(),
}),
Tags: nullable(
array(
object({
ID: pipe(string(), uuid()),
Tag: string(),
ImageID: pipe(string(), uuid()),
}),
),
),
Links: nullable(
array(
object({
ID: pipe(string(), uuid()),
Links: string(),
ImageID: pipe(string(), uuid()),
}),
),
),
Text: nullable(
array(
object({
ID: pipe(string(), uuid()),
ImageText: string(),
ImageID: pipe(string(), uuid()),
}),
),
),
}),
);
export const getUserImages = async (): Promise<
InferOutput<typeof getUserImagesResponseValidator>
InferOutput<typeof getUserImagesResponseValidator>
> => {
const request = getBaseRequest({ path: "image" });
const request = getBaseRequest({ path: "image" });
const res = await fetch(request).then((res) => res.json());
const res = await fetch(request).then((res) => res.json());
return parse(getUserImagesResponseValidator, res);
return parse(getUserImagesResponseValidator, res);
};