ArtemiyGranat · ArtemiyGranat · Feb 11, 2024 · Feb 10, 2024 · Feb 11, 2024 · Feb 11, 2024
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,7 @@
 !.github
 !.pre-commit-config.yaml
 !.python-version
+!.gitignore
 
 requirements*.lock
 

diff --git a/backend/src/main.py b/backend/src/main.py
@@ -1,7 +1,9 @@
 import logging
+import os
 from contextlib import asynccontextmanager
 
-from fastapi import FastAPI
+import httpx
+from fastapi import FastAPI, status
 from fastapi.middleware.cors import CORSMiddleware
 
 from shared.logger import configure_logging
@@ -11,20 +13,76 @@
 async def lifespan(_: FastAPI):
     configure_logging()
     yield
+    await ctx.close_client()
 
 
 app = FastAPI(lifespan=lifespan)
 logger = logging.getLogger("app")
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=[],  # TODO
+    allow_origins=[
+        "http://localhost:5173",
+        "http://127.0.0.1:5173",
+        "http://0.0.0.0:5173",
+    ],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
 )
 
 
+class Context:
+    def __init__(self) -> None:
+        self.http_client = httpx.AsyncClient()
+        self.scraper_url = os.getenv("SCRAPER_URL")
+
+    async def close_client(self) -> None:
+        await self.http_client.aclose()
+
+
+ctx = Context()
+
+
+@app.post(
+    "/scrape/{page}/{amount}",
+    summary="Scrape certain amount of images",
+    status_code=status.HTTP_200_OK,
+)
+async def scrape(page: int, amount: int) -> None:
+    await ctx.http_client.post(
+        f"{ctx.scraper_url}/scrape/{page}/{amount}", timeout=None
+    )
+    return {"message": f"Scraped {amount} images"}
+
+
+@app.get(
+    "/color_search/{color}",
+    summary="Search images by color",
+    status_code=status.HTTP_501_NOT_IMPLEMENTED,
+)
+def color_search():
+    return "Not implemented"
+
+
+@app.get(
+    "/text_search/{text}",
+    summary="Search images by text",
+    status_code=status.HTTP_501_NOT_IMPLEMENTED,
+)
+def text_search():
+    return "Not implemented"
+
+
+@app.get(
+    "/image_search/",
+    summary="Search images by another image",
+    status_code=status.HTTP_501_NOT_IMPLEMENTED,
+)
+def image_search():
+    return "Not implemented"
+
+
 @app.get("/", summary="Hello, world")
 def hello():
     return "Hello, world!"
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -3,15 +3,17 @@ services:
     container_name: backend
     build: backend
     ports:
-      - "8001:8000"
+      - "8000:8000"
+    environment:
+      - SCRAPER_URL=http://scraper:8000
     volumes:
       - ./config:/app/config
       - ./backend/src:/app/src
   scraper:
     container_name: scraper
     build: scraper
     ports:
-      - "8000:8000"
+      - "8001:8000"
     volumes:
       - ./config:/app/config
       - ./scraper/src:/app/src

diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+package-lock.json
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,7 @@
+# isat-cv-frontend
+
+## Usage
+```bash
+npm install
+npm run build -- --open
+```
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,22 @@
+{
+	"name": "frontend",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^1.0.0-next.90",
+		"@sveltejs/kit": "^1.0.0-next.587",
+		"svelte": "^3.54.0",
+		"svelte-check": "^2.9.2",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0"
+	},
+	"type": "module"
+}
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
@@ -0,0 +1,2 @@
+declare namespace App {
+}
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -0,0 +1,92 @@
+<!-- src/routes/+page.svelte -->
+<script context="module">
+	export const BACKEND_URL = 'http://0.0.0.0:8000';
+</script>
+
+<script>
+  let isLoading = false;
+  let startPage = '';
+  let amount = '';
+
+  const handleButtonClick = async () => {
+    if (!startPage || !amount) {
+      alert('Please fill in all fields.');
+      return;
+    }
+
+    isLoading = true;
+    try {
+      const url = `${BACKEND_URL}/scrape/${startPage}/${amount}`;
+      const response = await fetch(url, { method: 'POST' });
+    } catch (error) {
+      console.error('Error:', error);
+    } finally {
+      isLoading = false;
+    }
+  };
+</script>
+
+<main>
+  <h1>Educational Project</h1>
+  <h1>Scraper</h1>
+  <h3>Fill in start page and amount of images to be scraped, then click on "Scrape" button</h3>
+  <div class="input-group">
+    <input type="text" id="startPage" bind:value={startPage} placeholder="Enter start page" />
+    <input type="number" id="amount" bind:value={amount} placeholder="Enter amount" />
+  </div>
+  <button on:click={handleButtonClick} disabled={isLoading}>
+    {isLoading ? 'Loading...' : 'Scrape'}
+  </button>
+</main>
+
+<style>
+  main {
+    text-align: center;
+    padding: 1.5em;
+    max-width: 360px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #3498db;
+    font-size: 2em;
+    font-weight: 700;
+    margin-bottom: 15px;
+  }
+
+  .input-group {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
+    text-align: left;
+  }
+
+  .input-group input {
+    padding: 8px;
+    margin-bottom: 8px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 0.9em;
+  }
+
+  button {
+    background-color: #3498db;
+    color: white;
+    padding: 10px 20px;
+    font-size: 1em;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+
+  button:hover:enabled {
+    background-color: #217dbb;
+  }
+</style>
diff --git a/frontend/static/favicon.png b/frontend/static/favicon.png
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
@@ -0,0 +1,13 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,13 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+}
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;
diff --git a/scraper/src/main.py b/scraper/src/main.py
@@ -25,7 +25,11 @@ async def lifespan(_: FastAPI):
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"],
+    allow_origins=[
+        "http://localhost:8000",
+        "http://127.0.0.1:8000",
+        "http://0.0.0.0:8000",
+    ],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -57,3 +61,8 @@ async def scrape(page: int, amount: int) -> None:
                 detail=f"Failed to scrape images from page {info.page}",
             )
     logger.info(f"Scraped {amount} images")
+
+
+@app.get("/", summary="Check availability")
+async def hello():
+    return "Scraper is running!"