DeepAI Image Processing API

dishamodi0910 · Aug 9, 2024 · 1a82755 · 1a82755
1 parent 679e9b4
commit 1a82755
Show file tree

Hide file tree

Showing 6 changed files with 186 additions and 0 deletions.
diff --git a/New_APIs/DeepAI Image Processing API/index.html b/New_APIs/DeepAI Image Processing API/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>DeepAI Image Processing</title>
+</head>
+<body>
+    <header>
+        <h1>DeepAI Image Processing</h1>
+    </header>
+    <main>
+        <div class="upload-section">
+            <input type="file" id="imageUpload" accept="image/*">
+            <select id="processingType">
+                <option value="colorizer">Colorization</option>
+                <option value="super-resolution">Super-Resolution</option>
+                <option value="style-transfer">Style Transfer</option>
+            </select>
+            <button id="processButton">Process Image</button>
+        </div>
+        <div class="result-section">
+            <h2>Processed Image</h2>
+            <img id="processedImage" src="" alt="Processed Image">
+        </div>
+    </main>
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/New_APIs/DeepAI Image Processing API/index.js b/New_APIs/DeepAI Image Processing API/index.js
@@ -0,0 +1,52 @@
+document.getElementById('processButton').addEventListener('click', processImage);
+
+const apiKey = 'YOUR_DEEPAI_API_KEY'; // Replace with your DeepAI API key
+
+function processImage() {
+    const fileInput = document.getElementById('imageUpload');
+    const file = fileInput.files[0];
+    const processingType = document.getElementById('processingType').value;
+
+    if (!file) {
+        alert('Please select an image to upload.');
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('image', file);
+
+    let apiUrl = '';
+    switch (processingType) {
+        case 'colorizer':
+            apiUrl = 'https://api.deepai.org/api/colorizer';
+            break;
+        case 'super-resolution':
+            apiUrl = 'https://api.deepai.org/api/torch-srgan';
+            break;
+        case 'style-transfer':
+            apiUrl = 'https://api.deepai.org/api/deepdream';
+            break;
+        default:
+            return;
+    }
+
+    fetch(apiUrl, {
+        method: 'POST',
+        headers: {
+            'api-key': apiKey
+        },
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.output_url) {
+            document.getElementById('processedImage').src = data.output_url;
+        } else {
+            alert('Failed to process the image.');
+        }
+    })
+    .catch(error => {
+        console.error('Error processing image:', error);
+        alert('Error processing the image.');
+    });
+}
diff --git a/New_APIs/DeepAI Image Processing API/package-lock.json b/New_APIs/DeepAI Image Processing API/package-lock.json
diff --git a/New_APIs/DeepAI Image Processing API/package.json b/New_APIs/DeepAI Image Processing API/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "deepai-image-processing",
+  "version": "1.0.0",
+  "description": "A simple app to upload and process images using DeepAI Image Processing API",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "author": "Your Name",
+  "license": "ISC",
+  "dependencies": {
+    "deepai-image-processing": "file:",
+    "express": "^4.17.1"
+  }
+}
diff --git a/New_APIs/DeepAI Image Processing API/server.js b/New_APIs/DeepAI Image Processing API/server.js
@@ -0,0 +1,8 @@
+const express = require('express');
+const app = express();
+
+app.use(express.static('public'));
+
+app.listen(3000, () => {
+    console.log('Server is running on port 3000');
+});
diff --git a/New_APIs/DeepAI Image Processing API/style.css b/New_APIs/DeepAI Image Processing API/style.css
@@ -0,0 +1,68 @@
+body {
+    font-family: 'Arial', sans-serif;
+    background: linear-gradient(135deg, #36D1DC, #5B86E5);
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header h1 {
+    font-size: 3em;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
+}
+
+main {
+    width: 90%;
+    max-width: 800px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.upload-section,
+.result-section {
+    margin-bottom: 20px;
+}
+
+.upload-section input,
+.upload-section select {
+    margin-right: 10px;
+    padding: 10px;
+    font-size: 1em;
+    border: none;
+    border-radius: 5px;
+    width: 200px;
+    outline: none;
+}
+
+button {
+    padding: 10px 15px;
+    font-size: 1em;
+    background-color: #444;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #666;
+}
+
+.result-section img {
+    max-width: 100%;
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}