Skip to content
This repository has been archived by the owner on Oct 15, 2023. It is now read-only.

Commit

Permalink
Merge branch 'main' of https://github.com/Dungeon-MASSters/MASSter in…
Browse files Browse the repository at this point in the history 
…to main
  • Loading branch information
@blazinghorizon
blazinghorizon committed Oct 14, 2023
2 parents 601d684 + bfad6b9 commit 94aac4e
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 39 deletions.
2 changes: 1 addition & 1 deletion frontend/MASSter-frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ function App() {

return (
<div className="container">
<NavigationMenu className="mx-auto my-2">
<NavigationMenu className="mx-auto my-2 border-b-2 border-gray-200">
<NavigationMenuList className="flex flex-col sm:flex-row">
<NavigationMenuItem
className={clsx(navigationMenuTriggerStyle())}
Expand Down
113 changes: 75 additions & 38 deletions frontend/MASSter-frontend/src/pages/grid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
import { FullscreenLoader } from "@/components/loaders";
import { Card, CardTitle, CardFooter, CardDescription, CardContent, CardHeader } from "@/components/ui/card";
import {
Card,
CardTitle,
CardFooter,
CardDescription,
CardContent,
CardHeader
} from "@/components/ui/card";
import { pb } from "@/lib/pb-client";
import { RecordModel } from "pocketbase";
import { useQuery } from "react-query";
Expand All @@ -19,7 +26,7 @@ export function GridPage() {
refetchInterval: 10000 // обновлять каждые 10 сек
}
);

const [open, setOpen] = useState(false);
const [currentItem, setCurrentItem] = useState<RecordModel>();

Expand All @@ -35,71 +42,88 @@ export function GridPage() {
<DialogTrigger
key={item.id}
disabled={item.status != "generated"}
onClick={(e) => {
onClick={() => {
setCurrentItem(item);
setOpen(true);
}}>
}}
>
<GridCard item={item}></GridCard>
</DialogTrigger>
)
);
}
return (
<Dialog open={open} onOpenChange={setOpen}>
<div className="grid grid-cols-4 gap-2">{gridItems}</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
{gridItems}
</div>
<DialogContent className="sm:max-w-[425px]">
<ModalResultWindow
item={currentItem ?? listQuery.data.items[0]}
openChange={setOpen}></ModalResultWindow>
openChange={setOpen}
></ModalResultWindow>
</DialogContent>
</Dialog>
);
} else {
return <div>No items!</div>
return <div>No items!</div>;
}
} else {
return <div>Error</div>
return <div>Error</div>;
}
}

function GridCard({item}: {item: RecordModel}) {
const fileQuery = useQuery(
[`get-file-${item.id}`],
() => {
return pb.files.getUrl(item, item.output_image[0]);
}
);
function GridCard({ item }: { item: RecordModel }) {
const fileQuery = useQuery([`get-file-${item.id}`], () => {
return pb.files.getUrl(item, item.output_image[0]);
});

let coverMsg = undefined;
if (item.status != "generated") {
coverMsg = <div className="rounded-lg absolute h-full w-full bg-black
bg-opacity-30 flex items-center justify-center text-white">Обработка</div>
coverMsg = (
<div
className="rounded-lg absolute h-full w-full bg-black
bg-opacity-30 flex items-center justify-center text-white"
>
Обработка
</div>
);
}

let elem = <IconLoader3 className="animate-spin"></IconLoader3>;
if (fileQuery.isSuccess && item.status == "generated") {
elem = <img className="rounded-lg h-full w-full object-cover"
src={fileQuery.data.length == 0 ? imgPlaceholder : fileQuery.data}></img>
};
elem = (
<img
className="rounded-lg h-full w-full object-cover"
src={
fileQuery.data.length == 0 ? imgPlaceholder : fileQuery.data
}
></img>
);
}

return (
<Card className="w-full relative h-52">
{coverMsg}
<CardContent className="p-0 h-full">{elem}</CardContent>
<CardFooter className="rounded-lg flex w-full justify-between
absolute bottom-0 bg-gradient-to-b from-transparent to-black pt-8">
<CardFooter
className="rounded-lg flex w-full justify-between
absolute bottom-0 bg-gradient-to-b from-transparent to-black pt-8"
>
<CardTitle className="text-white">Image</CardTitle>
<CardDescription className="text-gray-300">{item.created}</CardDescription>
<CardDescription className="text-gray-300">
{item.created}
</CardDescription>
</CardFooter>
</Card>
);
}

type ModalResWindowProps = {
item: RecordModel,
openChange: React.Dispatch<React.SetStateAction<boolean>>
}
item: RecordModel;
openChange: React.Dispatch<React.SetStateAction<boolean>>;
};

function ModalResultWindow({item, openChange}: ModalResWindowProps) {
function ModalResultWindow({ item, openChange }: ModalResWindowProps) {
const [currentFileIndex, setCurrentFileIndex] = useState(0);

const fileQuery = useQuery(
Expand All @@ -111,34 +135,47 @@ function ModalResultWindow({item, openChange}: ModalResWindowProps) {

let elem = <IconLoader3 className="animate-spin"></IconLoader3>;
if (fileQuery.isSuccess && fileQuery.data.length != 0) {
elem = <img className="h-full w-full object-contain"
src={fileQuery.data}></img>
};
elem = (
<img
className="h-full w-full object-contain"
src={fileQuery.data}
></img>
);
}

return (
<div className="flex">
<div>
{elem}
<Button
disabled={currentFileIndex == 0}
onClick={() => { setCurrentFileIndex(currentFileIndex - 1) }}>
onClick={() => {
setCurrentFileIndex(currentFileIndex - 1);
}}
>
Previous
</Button>
<Button
disabled={currentFileIndex == item.num_images - 1 }
onClick={() => { setCurrentFileIndex(currentFileIndex + 1) }}>
disabled={currentFileIndex == item.num_images - 1}
onClick={() => {
setCurrentFileIndex(currentFileIndex + 1);
}}
>
Next
</Button>
</div>
<Card className="w-full">
<CardHeader>Image</CardHeader>
<CardContent className="h-full">
<Button
onClick={(e) => {
pb.collection('text_generation_mvp')
onClick={() => {
pb.collection("text_generation_mvp")
.update(item.id, { status: "open" })
.then(_ => openChange(false));
}}>Перегенерировать</Button>
.then((_) => openChange(false));
}}
>
Перегенерировать
</Button>
</CardContent>
</Card>
</div>
Expand Down
46 changes: 46 additions & 0 deletions model/Image_processing.py
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
from rembg import remove
from PIL import Image


def delete_background(image_path):
inp = Image.open(image_path)
out = remove(inp)
return out


def resize_img_to_eq(obj_img, back_img):
w_b, h_b = back_img.size
w_o, h_o = obj_img.size
if w_o > w_b or w_o < w_b:
width_percent = (w_b / float(obj_img.size[0]))
height_size = int((float(obj_img.size[1]) * float(width_percent)))
obj_img = obj_img.resize((w_b, height_size))
if h_o > h_b or h_o < h_b:
hight_percent = (h_b / float(obj_img.size[1]))
width_size = int((float(obj_img.size[0]) * float(hight_percent)))
obj_img = obj_img.resize((width_size, h_b))
return obj_img


def combine_images(obj_img, background, pos_x = 0, pos_y = 0, scale = 1, rotation = 0):
back_img = Image.open(background)
obj_img = Image.open(obj_img)

obj_img = resize_img_to_eq(obj_img, back_img)

#restrictions
if scale > 1: scale = 1
if scale < 0.2: scale = 0.2

obj_img = obj_img.resize((int(obj_img.width * scale), int(obj_img.height * scale)))

obj_img = obj_img.rotate(angle = rotation)

# centering
back_img.paste(
obj_img,
(round(back_img.width / 2 - obj_img.width / 2 + pos_x), round(back_img.height / 2 - obj_img.height / 2 + pos_y)),
mask=obj_img
)

return back_img

0 comments on commit 94aac4e

Please sign in to comment.