initial gui files

samadpls · Jul 16, 2024 · 01a6b97 · 01a6b97
1 parent 720204b
commit 01a6b97
Show file tree

Hide file tree

Showing 6 changed files with 347 additions and 0 deletions.
diff --git a/docs/assets/image1.png b/docs/assets/image1.png
diff --git a/docs/css/styles.css b/docs/css/styles.css
@@ -0,0 +1,66 @@
+body {
+  display: flex;
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar {
+  width: 200px;
+  background-color: #2c3e50;
+  color: white;
+  padding: 20px;
+}
+
+.sidebar .logo {
+  text-align: center;
+}
+
+.sidebar nav ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.sidebar nav ul li {
+  margin: 20px 0;
+}
+
+.sidebar nav ul li a {
+  color: white;
+  text-decoration: none;
+}
+
+.content {
+  flex: 1;
+  padding: 20px;
+}
+
+#encrypt-section, #decrypt-section, #about-section {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+input[type="file"], input[type="text"], textarea {
+  display: block;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #2980b9;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #3498db;
+}
+.logo {
+  margin-bottom: 1rem; /* Change to a smaller value */
+}
+
+.nav {
+  margin-top: 0; /* Ensure no extra margin above the nav */
+}
diff --git a/docs/decrypt.html b/docs/decrypt.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Decrypt Image</title>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="./css/styles.css">
+</head>
+<body>
+    <div class="container">
+        <h2>Decrypt Image</h2>
+        <div class="form-group">
+            <input type="file" class="form-control-file" id="decrypt-image" accept="image/*">
+        </div>
+        <div class="form-group">
+            <input type="text" class="form-control" id="decrypt-key" placeholder="Enter key (if any)">
+        </div>
+        <button class="btn btn-primary" id="decrypt-button">Decrypt</button>
+        <div id="decrypt-result" class="mt-3"></div>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image Cipher</title>
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="./css/styles.css">
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.js"></script>
+    <script src="jss/script.js"></script>
+</head>
+<body>
+    <div class="container-fluid">
+        <div class="row" style=" background-color: #3e424f; color: #edcf39;">
+            <div class="col-md-2 sidebar p-4" style="background-color: #272d35; color: #edcf39; height: 100vh;">
+                <div class="logo mb-1">
+                    <img src="./assets/image1.png" class="img-fluid" alt="Image Cipher">
+                </div>
+                <nav>
+                    <ul class="nav flex-column text-center">
+                        <li class="nav-item">
+                            <a class="btn" id="encrypt-link" style="color:#edcf39; font: 1.2em sans-serif;" href="#" onclick="showSection('encrypt-section');">Encrypt</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="btn" id="decrypt-link" style="color:#edcf39; font: 1.2em sans-serif;" href="#" onclick="showSection('decrypt-section');">Decrypt</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="btn" id="about-link" style="color:#edcf39; font: 1.2em sans-serif;" href="#" onclick="showSection('about-section');">About Us</a>
+                        </li>
+                    </ul>
+                </nav>
+            </div>
+            <div class="col-md-10 content p-4">
+                <div id="encrypt-section">
+                    <h2>Encrypt Image</h2>
+                    <div class="form-group">
+                        <input type="file" class="form-control-file" id="encrypt-image" accept="image/*">
+                    </div>
+                    <div class="form-group">
+                        <textarea class="form-control" id="encrypt-message" placeholder="Enter your message"></textarea>
+                    </div>
+                    <button class="btn btn-primary" id="encrypt-button">Encrypt</button>
+
+                    <div id="encrypt-result" class="mt-3">
+                        <button class="btn btn-primary" id="download-button">Download</button>
+                    </div>
+                </div>
+                <div id="decrypt-section" style="display: none;">
+                    <h2>Decrypt Image</h2>
+                    <div class="form-group">
+                        <input type="file" class="form-control-file" id="decrypt-image" accept="image/*">
+                    </div>
+                    <div class="form-group">
+                        <input type="text" class="form-control" id="decrypt-key" placeholder="Enter key (if any)">
+                    </div>
+                    <button class="btn btn-primary" id="decrypt-button">Decrypt</button>
+                    <div id="decrypt-result" class="mt-3">
+                        <textarea class="form-control" id="decrypt-message" placeholder="Decrypted message" readonly></textarea>
+                    </div>
+                </div>
+                <div id="about-section" style="display: none;">
+                    <h2>About Us</h2>
+                    <p>This is the about us section.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+
+</body>
+</html>
diff --git a/docs/jss/script.js b/docs/jss/script.js
@@ -0,0 +1,137 @@
+async function main() {
+    console.log("Loading pyodide.");
+    window.pyodide = await loadPyodide();
+    console.log("Loading imagcipher...");
+    await pyodide.loadPackage("micropip");
+    const pip = pyodide.pyimport("micropip");
+    await pip.install("imagecipher", { headers: { pragma: "no-cache", "cache-control": "no-cache" } });
+}
+
+main();
+
+function showSection(id) {
+    const sections = ['encrypt-section', 'decrypt-section', 'about-section'];
+    sections.forEach(section => {
+        document.getElementById(section).style.display = section === id ? 'block' : 'none';
+    });
+}
+
+document.addEventListener('DOMContentLoaded', (event) => {
+    document.getElementById('encrypt-link').addEventListener('click', (event) => {
+        event.preventDefault();
+        showSection('encrypt-section');
+    });
+    document.getElementById('decrypt-link').addEventListener('click', (event) => {
+        event.preventDefault();
+        showSection('decrypt-section');
+    });
+    document.getElementById('about-link').addEventListener('click', (event) => {
+        event.preventDefault();
+        showSection('about-section');
+    });
+
+    // Initial display setup
+    showSection('encrypt-section');
+
+    document.getElementById('encrypt-button').addEventListener('click', handleEncrypt);
+    document.getElementById('decrypt-button').addEventListener('click', handleDecrypt);
+});
+
+async function encryptImage(imageFile, message) {
+    const base64Image = await fileToBase64(imageFile);
+
+    const pythonCode = `
+        from image_cipher import ImageCipher
+        from PIL import Image
+        from io import BytesIO
+        import base64
+        import json
+
+        def encrypt_image(base64_image, message):
+            image_data = base64.b64decode(base64_image.split(",")[1])
+            image = Image.open(BytesIO(image_data))
+            cipher = ImageCipher()
+            encrypted_image = cipher.encode(image, message)
+
+            buffer = BytesIO()
+            encrypted_image.save(buffer, format="PNG")
+            encoded_image_str = base64.b64encode(buffer.getvalue()).decode("utf-8")
+            encoded_image_path = "data:image/png;base64," + encoded_image_str
+
+            return json.dumps({"encoded_image_path": encoded_image_path})
+
+        encrypt_image("${base64Image}", "${message}")
+    `;
+
+    const result = await pyodide.runPythonAsync(pythonCode);
+    return result;
+}
+
+function fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = (error) => reject(error);
+        reader.readAsDataURL(file);
+    });
+}
+
+async function decryptImage(imageFilePath, key) {
+    return pyodide.runPython(`
+from image_cipher import ImageCipher
+import json
+
+# Define a function to handle decryption
+def decrypt_image(image_file_path, key):
+    cipher = ImageCipher()
+    decoded_message = cipher.decode(image_file_path, key)
+    return json.dumps({'decoded_message': decoded_message})
+
+# Call the function with passed arguments
+decrypt_image(image_file_path, key)
+    `, { image_file_path: imageFilePath, key }); // Pass JavaScript variables here
+}
+
+
+async function handleEncrypt() {
+    const imageFile = document.getElementById("encrypt-image").files[0];
+    const message = document.getElementById("encrypt-message").value;
+    console.log("image:", imageFile);
+
+    if (imageFile && message) {
+        // Create a URL for the file
+        const imageUrl = URL.createObjectURL(imageFile);
+        console.log("image URL:", imageUrl);
+
+        // Display the image
+        document.getElementById("encrypt-result").innerHTML = `<h3>Selected Image</h3><img src="${imageUrl}" alt="Selected Image">`;
+
+        // Encrypt the image
+        const result = await encryptImage(imageFile, message);
+        const data = JSON.parse(result);
+        console.log(data);
+
+        // Display the encrypted image
+        document.getElementById("encrypt-result").innerHTML += `<h3>Encrypted Image</h3><img src="${data.encoded_image_path}" alt="Encrypted Image"><br><a href="${data.encoded_image_path}" download="encrypted_image.png">Download</a>`;
+    } else {
+        alert("Please select an image and enter a message.");
+    }
+}
+
+async function handleDecrypt() {
+    const imageFile = document.getElementById("decrypt-image").files[0];
+    const key = document.getElementById("decrypt-key").value;
+
+    if (imageFile) {
+        const reader = new FileReader();
+        reader.onload = async function(event) {
+            const imageFilePath = event.target.result;
+            const result = await decryptImage(imageFilePath, key);
+            const data = JSON.parse(result);
+            document.getElementById("decrypt-result").innerHTML = `<h3>Decrypted Message</h3><p>${data.decoded_message}</p>`;
+        };
+        reader.readAsDataURL(imageFile);
+    } else {
+        alert("Please select an image to decrypt.");
+    }
+}
diff --git a/docs/server.py b/docs/server.py
@@ -0,0 +1,43 @@
+from flask import Flask, request, send_file, jsonify
+from image_cipher import ImageCipher
+from werkzeug.utils import secure_filename
+import os
+
+app = Flask(__name__)
+cipher = ImageCipher()
+
+UPLOAD_FOLDER = 'uploads'
+if not os.path.exists(UPLOAD_FOLDER):
+    os.makedirs(UPLOAD_FOLDER)
+
+@app.route('/encode', methods=['POST'])
+def encode_image():
+    if 'image' not in request.files or 'message' not in request.form:
+        return jsonify({'error': 'No image or message provided'}), 400
+
+    image = request.files['image']
+    message = request.form['message']
+    encrypt = request.form.get('encrypt', 'true').lower() == 'true'
+
+    image_path = os.path.join(UPLOAD_FOLDER, secure_filename(image.filename))
+    image.save(image_path)
+
+    encoded_image_path = cipher.encode(image_path, message, encrypt)
+    return send_file(encoded_image_path, as_attachment=True)
+
+@app.route('/decode', methods=['POST'])
+def decode_image():
+    if 'image' not in request.files:
+        return jsonify({'error': 'No image provided'}), 400
+
+    image = request.files['image']
+    key = request.form.get('key', None)
+
+    image_path = os.path.join(UPLOAD_FOLDER, secure_filename(image.filename))
+    image.save(image_path)
+
+    message = cipher.decode(image_path, key)
+    return jsonify({'message': message})
+
+if __name__ == '__main__':
+    app.run(debug=True)