theo/werkzeugkiste
1
0
Fork 0
mirror of https://github.com/theoleuthardt/werkzeugkiste.git synced 2026-06-13 09:37:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: frontend page with remove bg api call and automatic download of output image

Browse source
This commit is contained in:
theoleuthardt 2025-02-22 14:30:52 +01:00
parent 9cc7fe61d8
commit ad7d94c8d0
2 changed files with 116 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/app/bg-remover/layout.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from "react";
import type { Metadata } from "next";
import { toolLinks } from "@/constants";
export const metadata: Metadata = {
title: toolLinks[6].title,
description: "Remove backgrounds from your images!",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={`antialiased`}>{children}</body>
</html>
);
}

96
frontend/src/app/bg-remover/page.tsx Normal file
View file

@ -0,0 +1,96 @@
"use client";
import React, { useState } from "react";
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";
import Button from "../../components/Button";
export default function BGRemover() {
const [file, setFile] = useState<File | null>(null);
const [loading, setLoading] = useState(false);
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
event.preventDefault();
if (event.target.files && event.target.files.length > 0) {
const selectedFile = event.target.files[0];
setFile(selectedFile);
}
};
const removeBG = async () => {
if (!file) {
alert("No file selected");
return;
} else if (file.size > 5 * 1024 * 1024) {
alert("File size should be less than 5MB");
return;
}
const formData = new FormData();
formData.append("file", file);
setLoading(true);
try {
const response = await fetch(process.env.backend_url + "/api/remove-bg", {
method: "POST",
body: formData,
});
if (!response.ok) {
console.error(`Error: ${response.statusText}`);
return;
}
const blob = await response.blob();
const url = window.URL.createObjectURL(blob);
const filename = file.name.split(".")[0];
const a = document.createElement("a");
a.href = url;
a.download = `${filename}.png`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
setTimeout(() => {
URL.revokeObjectURL(url);
}, 5000);
} catch (error) {
console.error("Error while converting:", error);
alert("Error while converting!");
} finally {
setLoading(false);
}
};
return (
<div className="w-screen h-auto min-h-screen bg-black text-white font-noto flex flex-col items-center">
<Navbar renderHomeLink={true} />
<div className="w-screen h-auto min-h-[calc(100vh-80px-60px)] flex flex-1 flex-col items-center justify-center">
<h2 className="text-5xl font-bold text-white mb-16">bg-remover</h2>
<div className="h-36 flex flex-row items-center justify-center gap-4">
<input
type="file"
className="h-16 border-2 border-white p-3 rounded-xl text-2xl text-center text-white"
id="documentUpload"
onChange={handleFileChange}
/>
</div>
<div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
<Button
content={
loading ? (
<div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
) : (
"remove background"
)
}
onClick={removeBG}
/>
</div>
</div>
<Footer className="flex justify-center items-end" />
</div>
);
}