Skip to content

Commit

Permalink
fixed the restore and realesrgan pages which are fully functional now…
Browse files Browse the repository at this point in the history 
… and added a cathegory attribute for the models to be easier to choose from at the index page
  • Loading branch information
@MrPutzi
MrPutzi committed Apr 26, 2024
1 parent d18719f commit 47c6747
Show file tree
Hide file tree
Showing 14 changed files with 541 additions and 174 deletions.
5 changes: 4 additions & 1 deletion components/InputForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {useCallback, useState} from 'react';
import LoadingDots from "./LoadingDots";
import generatePhoto from "../pages/api/generate";
import dotenv from "dotenv";

interface FormData {
width: number;
Expand Down Expand Up @@ -226,9 +227,11 @@ const InputForm: React.FC = () => {
name="numInterferenceSteps"
min="1"
max="50"
value={formData.numInterferenceSteps}
value={formData.numInterferenceSteps} defaultValue="20"//add a check for this value to be greater than 0
onChange={handleChange}
className="w-full mb-2"


/>
<span className="inline-block ml-2">{formData.numInterferenceSteps}</span>
</div>
Expand Down
21 changes: 15 additions & 6 deletions components/ModelComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ type ModelProps = {
description: string;
imageUrl: string;
link: string;
category: string;

};

Expand Down Expand Up @@ -90,6 +91,7 @@ const ModelList: React.FC<ModelListProps> = ({ models }) => {
description={model.description}
imageUrl={model.imageUrl}
link={model.link}
category={model.category}

/>
))}
Expand All @@ -101,19 +103,26 @@ const ModelComponent: React.FC = () => {
const [models, setModels] = React.useState<ModelProps[]>([]);

useEffect(() => {
// Načítanie modelov (simulácia)
// Load models (simulation)
const mockModels: ModelProps[] = [
{ title: 'tencentarc/gfpgan', description: 'úprava fotiek a detailov tváre', imageUrl: 'https://i.imgur.com/lEVlLiw.png', link:"/restore" },
{ title: 'stable diffusion', description: 'generovanie fotiek z textu', imageUrl: "https://i.imgur.com/GEQ0PGSl.png",link:"/generate" },
{ title: 'nightmareai/real-esrgan', description: 'zväčšenie rozlíšenia fotky', imageUrl: "https://i.imgur.com/1H73uDC.png",link:"/realesrgan" },
{ title: 'lucataco/realistic-vision-v5', description: 'generovanie realistických fotiek z textu', imageUrl: "https://replicate.delivery/pbxt/eVMzXJerAzpqnErNJ9P4ncWmd2d3OkGA31DKhG3ElQhLMIbRA/output.png",link:"/realvision" },
{ title: 'tencentarc/gfpgan', description: 'úprava fotiek a zväčšanie rozlíšenia', imageUrl: 'https://i.imgur.com/lEVlLiw.png', link:"/restore", category:"Restore"},
{ title: 'stable diffusion', description: 'generácia fotiek z textu', imageUrl: "https://i.imgur.com/GEQ0PGSl.png",link:"/generate", category:"Generate" },
{ title: 'nightmareai/real-esrgan', description: 'zväčšenie rozlíšenia', imageUrl: "https://i.imgur.com/1H73uDC.png",link:"/realesrgan", category:"Restore" },
{ title: 'lucataco/realistic-vision-v5', description: 'generácia realistických fotiek z textu', imageUrl: "https://replicate.delivery/pbxt/eVMzXJerAzpqnErNJ9P4ncWmd2d3OkGA31DKhG3ElQhLMIbRA/output.png",link:"/realvision", category:"Generate" },
];
setModels(mockModels);
}, []);

// Filter models based on category
const restoreModels = models.filter(model => model.category === 'Restore');
const generateModels = models.filter(model => model.category === 'Generate');

return (
<div>
<ModelList models={models} />
<h2 className="text-3xl antialiased font-bold pb-12">Restore Models</h2>
<ModelList models={restoreModels} />
<h2 className="text-3xl antialiased font-bold pb-12">Generate Models</h2>
<ModelList models={generateModels} />
</div>
);
};
Expand Down
5 changes: 4 additions & 1 deletion pages/api/generate.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import requestIp from "request-ip";
import {NextApiRequest, NextApiResponse} from "next";
import {Ratelimit} from "@upstash/ratelimit";
import redis from "../../utils/redis";
import {dot} from "@tensorflow/tfjs";
dotenv.config()

interface ExtendedNextApiRequest extends NextApiRequest {
Expand Down Expand Up @@ -42,8 +43,10 @@ export default async function handler (
}
}



const replicate = new Replicate({
auth: "r8_2vsTHdL2qcq6r7jJLiCbNnZTTROSwNA0iEK1H",
auth: process.env.REPLICATE_API_KEY,
userAgent: 'https://www.npmjs.com/package/create-replicate'
})
const model = 'stability-ai/sdxl:39ed52f2a78e934b3ba6e2a89f5b1c712de7dfea535525255b1aa35c5565e08b'
Expand Down
29 changes: 29 additions & 0 deletions pages/api/predictions/[id].js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import dotenv from "dotenv";
import Replicate from "replicate";

export default async function handler(req, res) {
const response = await fetch(
"https://api.replicate.com/v1/predictions/" + req.query.id,
{
headers: {
Authorization: "process.env.REPLICATE_API_TOKEN",
"Content-Type": "application/json",
},
}
);

const replicate = new Replicate({
auth: process.env.REPLICATE_API_KEY,
userAgent: 'https://www.npmjs.com/package/create-replicate'
});
c
if (response.status !== 200) {
let error = await response.json();
res.statusCode = 500;
res.end(JSON.stringify({ detail: error.detail }));
return;
}

const prediction = await response.json();
res.end(JSON.stringify(prediction));
}
28 changes: 28 additions & 0 deletions pages/api/predictions/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export default async function handler(req, res) {
const response = await fetch("https://api.replicate.com/v1/predictions", {
method: "POST",
headers: {
Authorization: process.env.REPLICATE_API_TOKEN,
"Content-Type": "application/json",
},
body: JSON.stringify({
// Pinned to a specific version of Stable Diffusion
// See https://replicate.com/stability-ai/sdxl
version: "2b017d9b67edd2ee1401238df49d75da53c523f36e363881e057f5dc3ed3c5b2",

// This is the text prompt that will be submitted by a form on the frontend
input: { prompt: req.body.prompt },
}),
});

if (response.status !== 201) {
let error = await response.json();
res.statusCode = 500;
res.end(JSON.stringify({ detail: error.detail }));
return;
}

const prediction = await response.json();
res.statusCode = 201;
res.end(JSON.stringify(prediction));
}
162 changes: 115 additions & 47 deletions pages/api/realesrgan.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,12 @@
import redis from "../../utils/redis";
import {Ratelimit} from "@upstash/ratelimit";
import {json} from "node:stream/consumers";
import {model} from "@tensorflow/tfjs";
import * as replicate from "replicate";
import fetch from "node-fetch";
dotenv.config()


// interface ExtendedNextApiRequest extends NextApiRequest {
// body: {
// imageUrl: string;
Expand All @@ -29,53 +33,85 @@
})
: undefined;


export default async function handler (
// req: ExtendedNextApiRequest,
req: NextApiRequest,
// res: NextApiResponse<Data>
res: NextApiResponse
) {
// Rate Limiter Code
if (ratelimit) {
const identifier = requestIp.getClientIp(req);
const result = await ratelimit.limit(identifier!);
res.setHeader("X-RateLimit-Limit", result.limit);
res.setHeader("X-RateLimit-Remaining", result.remaining);

if (!result.success) {
res
.status(429)
return;
}
}

const replicate = new Replicate({
auth: "r8_2vsTHdL2qcq6r7jJLiCbNnZTTROSwNA0iEK1H",
userAgent: 'https://www.npmjs.com/package/create-replicate'
})
const output = await replicate.run(
"nightmareai/real-esrgan:42fed1c4974146d4d2414e2be2c5277c7fcf05fcc3a73abf41610695738c1d7b",
{
input: {
image: req.body.imageUrl,
scale: 2,
face_enhance: false
}
}
);

const handleOutput = (output: any) => {
if (!output || !output.output) {
return { success: false, message: "Failed to generate photo. Please try again later." };
}
const photoUrl = output.output;
return { photoUrl };
}

const photoUrl = handleOutput(output);
res.status(200).json(photoUrl);
}
//
// export default async function handler (
// // req: ExtendedNextApiRequest,
// req: NextApiRequest,
// // res: NextApiResponse<Data>
// res: NextApiResponse
// ) {
// // Rate Limiter Code
// if (ratelimit) {
// const identifier = requestIp.getClientIp(req);
// const result = await ratelimit.limit(identifier!);
// res.setHeader("X-RateLimit-Limit", result.limit);
// res.setHeader("X-RateLimit-Remaining", result.remaining);
//
// if (!result.success) {
// res
// .status(429)
// return;
// }
// }
//
// const replicate = new Replicate({
// auth: process.env.REPLICATE_API_KEY,
// userAgent: 'https://www.npmjs.com/package/create-replicate'
// })
// const output = await replicate.run(
// "nightmareai/real-esrgan:42fed1c4974146d4d2414e2be2c5277c7fcf05fcc3a73abf41610695738c1d7b",
// {
// input: {
// image: req.body.imageUrl,
// scale: 2,
// face_enhance: false
// }
// }
// );
//
// const handleOutput = (output: any) => {
// if (!output || !output.output) {
// return { success: false, message: "Failed to generate photo. Please try again later." };
// }
// const photoUrl = output.output;
// return { photoUrl };
// }
//
// const photoUrl = handleOutput(output);
// res.status(200).json(photoUrl);
// }
//
// export default async function handler(
// req: NextApiRequest,
// res: NextApiResponse) {
// //
// const response = await fetch("https://api.replicate.com/v1/predictions" + req.query.id, {
// method: "POST",
// headers: {
// "Content-Type": "application/json",
// Authorization: "process.env.REPLICATE_API_TOKEN",
// },
// body: JSON.stringify({
// version: "42fed1c4974146d4d2414e2be2c5277c7fcf05fcc3a73abf41610695738c1d7b",
// input: {
// image: req.body.imageUrl,
// scale: 2,
// face_enhance: false
// }
// }),
// });
//
// if (response.status !== 201) {
// let error = await response.json();
// res.statusCode = 500;
// res.end(JSON.stringify({ detail: error.detail }));
// return;
// }
//
// const prediction = await response.json();
// res.statusCode = 201;
// res.end(JSON.stringify(prediction));
// }



Expand All @@ -91,3 +127,35 @@
//
// const photoUrl = handleOutput(output);
// res.status(200).json(photoUrl);

export default async function handler(
req:NextApiRequest,
res:NextApiResponse
) {
const replicate = new Replicate({
auth: process.env.REPLICATE_API_KEY,
userAgent: 'https://www.npmjs.com/package/create-replicate'
})
const model = 'nightmareai/real-esrgan:350d32041630ffbe63c8352783a26d94126809164e54085352f8326e53999085'
const { image, scale, faceEnhance } = req.body;
try {
const output = await replicate.run(
model,
{
input: {
image,
scale,
face_enhance: faceEnhance,
},
}
);

res.status(200).json(output);
} catch (error) {
console.error(error);
res.status(500).json({message: "Failed to generate photo. Please try again later."});
}

}


2 changes: 1 addition & 1 deletion pages/api/realvision.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default async (
}
}
const replicate = new Replicate({
auth: "r8_QODWLhOyB1bnz2kIpNnK740PcuHM1E94ZKCVw", // Moved API key to environment variable
auth: process.env.REPLICATE_API_KEY,
userAgent: 'https://www.npmjs.com/package/create-replicate'
})
const model = 'lucataco/realistic-vision-v5:8aeee50b868f06a1893e3b95a8bb639a8342e846836f3e0211d6a13c158505b1'
Expand Down
Loading

0 comments on commit 47c6747

Please sign in to comment.