guilhermewerner/image-caption-api
1
0
Fork 0
mirror of https://github.com/guilhermewerner/image-caption-api synced 2025-06-15 22:54:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update api and add website

Browse Source
This commit is contained in:
Guilherme Werner
2023-10-10 20:37:03 -03:00
parent 6e30532b85
commit 38d059f008
12 changed files with 807 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages/_app.tsx Normal file
View File

@ -0,0 +1,6 @@
import '@/styles/globals.scss'
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
}

17
src/pages/_document.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head>
<meta charSet='utf-8' />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}

96
src/pages/index.tsx Normal file
View File

@ -0,0 +1,96 @@
import Head from 'next/head'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Image from 'react-bootstrap/Image';
import Ratio from 'react-bootstrap/Ratio';
import { useState } from 'react';
export default function Home() {
const [image64, setImage64] = useState<string | ArrayBuffer | null | undefined>(null);
const [imageUrl, setImageUrl] = useState<string | ArrayBuffer | null | undefined>(null);
const [caption, setCaption] = useState<string | null | undefined>(null);
const handleImageChange = (e: any) => {
const file = e.target.files[0];
if (file) {
const imageUrl = URL.createObjectURL(file);
setImageUrl(imageUrl);
const reader = new FileReader();
reader.onload = (e) => {
const base64Image = e?.target?.result;
setImage64(base64Image);
};
reader.readAsDataURL(file);
}
};
const handleSubmit = () => {
if (imageUrl) {
fetch("http://localhost:5885/caption-base64", {
method: "POST",
body: JSON.stringify({ image_base64: image64 }),
headers: {
"Content-Type": "application/json",
}
}).then((res) => {
if (res.status === 200) {
return res.json();
}
}).then((data) => {
setCaption(data.caption)
})
}
};
return (
<>
<Head>
<title>Image Caption</title>
</Head>
<header>
<Navbar expand="lg" className="shadow-sm">
<Container>
<Navbar.Brand href="/">Image Caption</Navbar.Brand>
</Container>
</Navbar>
</header>
<main className='mt-3'>
<Container>
<div className='d-flex justify-content-center align-items-center flex-grow-1'>
<div
className='d-flex'
style={{ width: '480px', height: 'auto' }}
>
<Ratio className='d-flex' aspectRatio="16x9">
<Image src={imageUrl} />
</Ratio>
</div>
</div>
<Form className='my-3'>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label>Image</Form.Label>
<Form.Control type="file" onChange={handleImageChange} />
</Form.Group>
<div className='text-end'>
<Button variant="primary" onClick={handleSubmit}>
Submit
</Button>
</div>
</Form>
<p className='my-3 text-center'>{caption}</p>
</Container>
</main>
</>
)
}

11
src/styles/globals.scss Normal file
View File

@ -0,0 +1,11 @@
@import "~bootstrap/scss/_functions";
@import "~bootstrap/scss/_variables";
@import "~bootstrap/scss/_variables-dark";
@import "~bootstrap/scss/_mixins";
@import "~bootstrap/scss/bootstrap";
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap");
body {
font-family: "Roboto", var(--bs-font-sans-serif);
}