From c438350b1b2bb65c332e951eee65d4360372ba15 Mon Sep 17 00:00:00 2001
From: cleontay <cleonsh@gmail.com>
Date: Tue, 30 May 2023 19:49:13 +0800
Subject: [PATCH] Wav Integrated and Checkbox Added

---
 Application/lsb_rep.py               | 51 ++++++++++++++++++-----
 Application/views/decode.html        | 39 +++++++++++++-----
 Application/views/decode_result.html | 51 ++++++++++++++++++-----
 Application/views/encode.html        | 36 +++++++++++-----
 Application/views/encode_result.html | 61 +++++++++++++++++++++-------
 5 files changed, 183 insertions(+), 55 deletions(-)

diff --git a/Application/lsb_rep.py b/Application/lsb_rep.py
index 893df9f..df0fe9c 100644
--- a/Application/lsb_rep.py
+++ b/Application/lsb_rep.py
@@ -1,8 +1,9 @@
 from flask import Flask, render_template, request, redirect, session, send_from_directory
-from lib.steganography import img_steg
+from lib.steganography import img_steg, wav_steg
 import cv2
 import os
 import sys
+import wave
 
 WORKING_PATH = os.path.join(os.path.dirname(os.path.abspath(sys.argv[0])), "upload") + os.sep
 
@@ -33,16 +34,32 @@ def encoding():
 
     if file.filename != "":
         file.save(WORKING_PATH + file.filename)
-        steg = img_steg.img_steg(WORKING_PATH + file.filename, b2c).encode(payload)
-        cv2.imwrite(WORKING_PATH + "encoded_" + file.filename, steg)
-        session['image'] = file.filename
-        session['image2'] = "encoded_" + file.filename
+
+        file_extension = os.path.splitext(file.filename)[1]
+        if file_extension == ".png" or file_extension == ".bmp":
+            steg = img_steg.img_steg(WORKING_PATH + file.filename, b2c).encode(payload)
+            cv2.imwrite(WORKING_PATH + "encoded_" + file.filename, steg)
+            session['image'] = file.filename
+            session['image2'] = "encoded_" + file.filename
+        elif file_extension == ".wav":
+            steg = wav_steg.wav_steg(WORKING_PATH + file.filename, b2c).encode(payload)
+
+            # Write encoded data to file
+            new_wav_file = wave.open(WORKING_PATH + "encoded_" + file.filename, "wb")
+            new_wav_file.setnchannels(steg["num_channels"])
+            new_wav_file.setsampwidth(steg["sample_width"])
+            new_wav_file.setframerate(steg["frame_rate"])
+            new_wav_file.writeframes(steg["num_frames"])
+            new_wav_file.close()
+            session['wav'] = file.filename
+            session['wav2'] = "encoded_" + file.filename
+
         return redirect("/encode_result")
 
 @app.route('/encode_result')
 def encode_result():
     if len(session) > 0:
-        return render_template("encode_result.html", image=session.get("image"), image2=session.get('image2'))
+        return render_template("encode_result.html")
     else:
         return redirect("/encode")
  
@@ -57,18 +74,32 @@ def decoding():
     b2c = [int(x) for x in request.form.getlist("b2c")]
     if file.filename != "":
         file.save(WORKING_PATH + file.filename)
-        payload = img_steg.img_steg(WORKING_PATH + file.filename, b2c).decode()
-        session["payload"] = payload
-        session["image"] = file.filename
+
+        file_extension = os.path.splitext(file.filename)[1]
+        if file_extension == ".png" or file_extension == ".bmp":
+            payload = img_steg.img_steg(WORKING_PATH + file.filename, b2c).decode()
+            session["payload"] = payload
+            session["image"] = file.filename
+        elif file_extension == ".wav":
+            payload = wav_steg.wav_steg(WORKING_PATH + file.filename, b2c).decode()
+            session["payload"] = payload
+            session["wav"] = file.filename
+
         return redirect("/decode_result")
 
 @app.route('/decode_result')
 def decode_result():
     if len(session) > 0:
-        return render_template("decode_result.html", payload=session.get("payload"), image=session.get("image"))
+        return render_template("decode_result.html")
     else:
         return redirect("/decode")
 
+@app.route('/get_session')
+def get_session():
+    session_data = dict(session)
+    return session_data
+
+
 @app.route('/upload/<path:filename>')
 def upload(filename):
     return send_from_directory('upload', filename)
diff --git a/Application/views/decode.html b/Application/views/decode.html
index bf4529f..a6dfd62 100644
--- a/Application/views/decode.html
+++ b/Application/views/decode.html
@@ -55,6 +55,10 @@
             color: white;
             cursor: pointer;
         }
+        table{
+            width: 400px;
+            margin: 10px auto;
+        }
     </style>
 </head>
 
@@ -66,20 +70,33 @@
                 <div class="upload-text">Drag and drop an image here or click to browse</div>
                 <input type="file" name="encoded_file" id="fileInput">
             </div>
-            <label for="b2c">Bits to Change:</label>
-            <div>
-                <input type="checkbox" name="b2c" value="8" placeholder="8">
-                <input type="checkbox" name="b2c" value="7" placeholder="7">
-                <input type="checkbox" name="b2c" value="6" placeholder="6">
-                <input type="checkbox" name="b2c" value="5" placeholder="5">
-                <input type="checkbox" name="b2c" value="4" placeholder="4">
-                <input type="checkbox" name="b2c" value="3" placeholder="3">
-                <input type="checkbox" name="b2c" value="2" placeholder="2">
-                <input type="checkbox" name="b2c" value="1" placeholder="1">
-            </div>
             <div style="width: 100%; text-align: center; padding: 10px 0px">
+                <label for="b2c">Bits to Change:</label>
+                <table>
+                    <tr>
+                        <th>8</th>
+                        <th>7</th>
+                        <th>6</th>
+                        <th>5</th>
+                        <th>4</th>
+                        <th>3</th>
+                        <th>2</th>
+                        <th>1</th>
+                    </tr>
+                    <tr>
+                        <td><input type="checkbox" name="b2c" value="8" placeholder="8"></td>
+                        <td><input type="checkbox" name="b2c" value="7" placeholder="7"></td>
+                        <td><input type="checkbox" name="b2c" value="6" placeholder="6"></td>
+                        <td><input type="checkbox" name="b2c" value="5" placeholder="5"></td>
+                        <td><input type="checkbox" name="b2c" value="4" placeholder="4"></td>
+                        <td><input type="checkbox" name="b2c" value="3" placeholder="3"></td>
+                        <td><input type="checkbox" name="b2c" value="2" placeholder="2"></td>
+                        <td><input type="checkbox" name="b2c" value="1" placeholder="1"></td>
+                    </tr>
+                </table>
                 <input type="submit" value="Decode">
             </div>
+
         </form>
     </div>
 </body>
diff --git a/Application/views/decode_result.html b/Application/views/decode_result.html
index b1a903f..be29a8c 100644
--- a/Application/views/decode_result.html
+++ b/Application/views/decode_result.html
@@ -4,18 +4,49 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <title>RESULT</title>
 </head>
 <body>
-    <section>
-        <div>
-            <h1>Decoded</h1>
-            <img src="{{ url_for('upload', filename=image) }}" alt="Image Not Found">
-        </div>
-        <div>
-            <h1>Secret Text:</h1>
-            <p>{{ payload }}</p>
-        </div>
-    </section>
 </body>
+<script>
+
+    $(document).ready(function(){
+
+        $.get('/get_session', function(response) {
+            if(response.hasOwnProperty("image")){
+                console.log(response)
+                var html_content = `<section>
+                    <div>
+                        <h1>Decoded</h1>
+                        <img src="upload/` + response["image"] + `" alt="Image Not Found">
+                    </div>
+                    <div>
+                        <h1>Secret Text:</h1>
+                        <p>` + response["payload"] + `</p>
+                    </div>
+                </section>`
+                $("body").append(html_content)
+            }
+            else if(response.hasOwnProperty("wav")){
+                var html_content = `<section>
+                <h1>Decoded</h1>
+                <audio controls>
+                    <source src="upload/` + response["wav"] + `" type="audio/wav">
+                    Your browser does not support the audio element.
+                </audio>
+                <div>
+                    <h1>Secret Text:</h1>
+                    <p>` + response["payload"] + `</p>
+                </div>
+                </section>`
+                $("body").append(html_content)
+            }
+            else if(response.hasOwnProperty("txt")){
+                console.log(response)
+            }
+        });
+    })
+
+</script>
 </html>
\ No newline at end of file
diff --git a/Application/views/encode.html b/Application/views/encode.html
index 5dd0426..b65b15b 100644
--- a/Application/views/encode.html
+++ b/Application/views/encode.html
@@ -57,6 +57,10 @@
             color: white;
             cursor: pointer;
         }
+        table{
+            width: 400px;
+            margin: 10px auto;
+        }
     </style>
 </head>
 
@@ -70,16 +74,28 @@
             </div>
             <div style="width: 100%; text-align: center; padding: 10px 0px">
                 <label for="b2c">Bits to Change:</label>
-                <div>
-                    <input type="checkbox" name="b2c" value="8" placeholder="8">
-                    <input type="checkbox" name="b2c" value="7" placeholder="7">
-                    <input type="checkbox" name="b2c" value="6" placeholder="6">
-                    <input type="checkbox" name="b2c" value="5" placeholder="5">
-                    <input type="checkbox" name="b2c" value="4" placeholder="4">
-                    <input type="checkbox" name="b2c" value="3" placeholder="3">
-                    <input type="checkbox" name="b2c" value="2" placeholder="2">
-                    <input type="checkbox" name="b2c" value="1" placeholder="1">
-                </div>
+                <table>
+                    <tr>
+                        <th>8</th>
+                        <th>7</th>
+                        <th>6</th>
+                        <th>5</th>
+                        <th>4</th>
+                        <th>3</th>
+                        <th>2</th>
+                        <th>1</th>
+                    </tr>
+                    <tr>
+                        <td><input type="checkbox" name="b2c" value="8" placeholder="8"></td>
+                        <td><input type="checkbox" name="b2c" value="7" placeholder="7"></td>
+                        <td><input type="checkbox" name="b2c" value="6" placeholder="6"></td>
+                        <td><input type="checkbox" name="b2c" value="5" placeholder="5"></td>
+                        <td><input type="checkbox" name="b2c" value="4" placeholder="4"></td>
+                        <td><input type="checkbox" name="b2c" value="3" placeholder="3"></td>
+                        <td><input type="checkbox" name="b2c" value="2" placeholder="2"></td>
+                        <td><input type="checkbox" name="b2c" value="1" placeholder="1"></td>
+                    </tr>
+                </table>
                 <input type="text" name="payload" placeholder="Secret Code">
                 <input type="submit" value="Encode">
             </div>
diff --git a/Application/views/encode_result.html b/Application/views/encode_result.html
index fee870e..0e54869 100644
--- a/Application/views/encode_result.html
+++ b/Application/views/encode_result.html
@@ -4,22 +4,55 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <title>RESULT</title>
 </head>
 <body>
-    
-    <section style="display: flex; justify-content: flex-start;">
-
-        <div>
-            <h1>Original</h1>
-            <img src="{{ url_for('upload', filename=image2) }}" alt="Image Not Found">
-        </div>
-        <div>
-            <h1>Encoded</h1>
-            <img src="{{ url_for('upload', filename=image2) }}" alt="Image Not Found">
-        </div>
-
-    </section>
-
 </body>
+<script>
+
+    $(document).ready(function(){
+
+        $.get('/get_session', function(response) {
+            if(response.hasOwnProperty("image")){
+                console.log(response)
+                var html_content = `<section style="display: flex; justify-content: flex-start;">
+                    <div>
+                        <h1>Original</h1>
+                        <img src="upload/` + response["image"] + `" alt="Image Not Found">
+                    </div>
+                    <div>
+                        <h1>Encoded</h1>
+                        <img src="upload/` + response["image2"] + `" alt="Image Not Found">
+                    </div>
+
+                </section>`
+                $("body").append(html_content)
+            }
+            else if(response.hasOwnProperty("wav")){
+                var html_content = `<section style="display: flex; justify-content: flex-start;">
+                <div>
+                    <h1>Original</h1>
+                    <audio controls>
+                        <source src="upload/` + response["wav"] + `" type="audio/wav">
+                        Your browser does not support the audio element.
+                    </audio>
+                </div>
+                <div>
+                    <h1>Encoded</h1>
+                    <audio controls>
+                        <source src="upload/` + response["wav2"] + `" type="audio/wav">
+                        Your browser does not support the audio element.
+                    </audio>
+                </div>
+                </section>`
+                $("body").append(html_content)
+            }
+            else if(response.hasOwnProperty("txt")){
+                console.log(response)
+            }
+        });
+    })
+
+</script>
 </html>
\ No newline at end of file