launch gui

.streamlit/config.toml

@@ -0,0 +1,5 @@
+[theme]
+primaryColor="#ffffff"
+backgroundColor="#181d27"
+secondaryBackgroundColor = "#2c374d"
+textColor =  "#ffbf00"

docs/app.py

@@ -0,0 +1,108 @@
+import streamlit as st
+from image_cipher import ImageCipher
+import tempfile
+import os
+
+
+def save_uploaded_file_to_temp(uploaded_file):
+    temp_dir = tempfile.mkdtemp()
+    temp_file_path = os.path.join(temp_dir, uploaded_file.name)
+    with open(temp_file_path, "wb") as f:
+        f.write(uploaded_file.getbuffer())
+    return temp_file_path
+
+
+def encrypt_image(image_path, message, encrypt):
+    cipher = ImageCipher()
+    encoded_image_path = cipher.encode(image_path, message, encrypt=encrypt)
+    return encoded_image_path, cipher.key
+
+
+def decrypt_image(image_path, key):
+    cipher = ImageCipher()
+    decoded_message = cipher.decode(image_path, key)
+    return decoded_message
+
+
+def main():
+    st.sidebar.image("docs/assets/image1.png", use_column_width=True)
+    with open("docs/css/styles.css") as f:
+        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
+    st.sidebar.markdown(
+        """<a href='https://github.com/samadpls/ImageCipher'>\
+        <img src='https://img.shields.io/github/stars/samadpls/ImageCipher?\
+            color=red&label=star%20me&logoColor=red&style=social'></a>""",
+        unsafe_allow_html=True,
+    )
+    st.title("Image Cipher")
+    app_mode = st.sidebar.radio(
+        "Choose the app mode", ["Encrypt", "Decrypt", "About Us"]
+    )
+
+    if app_mode == "Encrypt":
+        st.header("Encrypt Image")
+        uploaded_image = st.file_uploader(
+            "Choose an image...", type=["png", "jpg", "jpeg"]
+        )
+        message = st.text_area("Enter your message")
+        use_encryption = st.checkbox("Use Encryption")
+
+        if st.button("Encrypt"):
+            if uploaded_image and message:
+                temp_image_path = save_uploaded_file_to_temp(uploaded_image)
+                encoded_image_path, key = encrypt_image(
+                    temp_image_path, message, use_encryption
+                )
+                if use_encryption:
+                    st.markdown("### Encryption Key:")
+                    st.markdown(f"```\n{key.decode()}\n```")
+                with open(encoded_image_path, "rb") as file:
+                    st.download_button(
+                        "Download Encrypted Image",
+                        file,
+                        file_name="encrypted_image.png",
+                    )
+                st.image(encoded_image_path, caption="Encrypted Image")
+            else:
+                st.error(
+                    "Please upload an image and enter a message\
+                         to encrypt."
+                )
+
+    elif app_mode == "Decrypt":
+        st.header("Decrypt Image")
+        uploaded_image = st.file_uploader(
+            "Choose an image...", type=["png", "jpg", "jpeg"]
+        )
+        key = st.text_input("Enter key (if any)")
+
+        if st.button("Decrypt"):
+            try:
+                if uploaded_image:
+                    temp_path = save_uploaded_file_to_temp(uploaded_image)
+                    decrypted_message = decrypt_image(temp_path, key)
+                    st.text_area(
+                        "Decrypted Message",
+                        value=decrypted_message,
+                        height=200
+                    )
+
+                else:
+                    st.error("Please upload an image to decrypt.")
+
+            except Exception as e:
+                st.error(e)
+
+    elif app_mode == "About Us":
+        st.header("About Us")
+        st.markdown(
+            "This project is developed by <ul> <li>[Abdul Samad]\
+                    (https://github.com/samadpls/) </li>\
+                     <li> [Maira Usman](https://github.com/Myrausman/)</li> \
+                    </ul>",
+            unsafe_allow_html=True,
+        )
+
+
+if __name__ == "__main__":
+    main()

docs/css/styles.css

@@ -1,66 +1,97 @@
+/* Main container */
 body {
-  display: flex;
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
+  background-color: #181d27;
+  color: #ffbf00;
 }
 
-.sidebar {
-  width: 200px;
-  background-color: #2c3e50;
-  color: white;
-  padding: 20px;
+/* Sidebar */
+.css-1d391kg {
+  background-color: #4f535a;
 }
 
-.sidebar .logo {
-  text-align: center;
+.css-1lcbmhc, .css-1d2azem {
+  color: #ffbf00;
 }
 
-.sidebar nav ul {
-  list-style-type: none;
-  padding: 0;
+.css-1v8qudd {
+  background-color: #2c374d;
+  color: #ffbf00;
 }
 
-.sidebar nav ul li {
-  margin: 20px 0;
+/* Header */
+.css-1siy2j7 {
+  color: #ffbf00;
 }
 
-.sidebar nav ul li a {
-  color: white;
-  text-decoration: none;
+/* Radio buttons and text input */
+.css-1ex6qaa {
+  background-color: #2c374d;
+  color: #ffbf00;
 }
 
-.content {
-  flex: 1;
-  padding: 20px;
+.css-1ex6qaa input[type="radio"] {
+  background-color: #2c374d;
+  color: #ffbf00;
 }
 
-#encrypt-section, #decrypt-section, #about-section {
-  max-width: 600px;
-  margin: 0 auto;
+.css-1ex6qaa input[type="text"] {
+  background-color: #2c374d;
+  color: #ffbf00;
 }
 
-input[type="file"], input[type="text"], textarea {
-  display: block;
-  width: 100%;
-  margin-bottom: 20px;
+.css-1ex6qaa textarea {
+  background-color: #2c374d;
+  color: #ffbf00;
 }
 
-button {
-  padding: 10px 20px;
-  background-color: #2980b9;
-  color: white;
-  border: none;
-  cursor: pointer;
+/* Buttons */
+.css-1df45cr, .css-1f1iwnp, .css-1ktajzc {
+  background-color: #152544;
+  color: #ffbf00;
 }
 
-button:hover {
-  background-color: #3498db;
+.css-1df45cr:hover, .css-1f1iwnp:hover, .css-1ktajzc:hover {
+  background-color: #152544;
+  color: #ffffff;
 }
-.logo {
-  margin-bottom: 1rem; /* Change to a smaller value */
+
+/* Download button */
+.css-10trblm {
+  background-color: #152544;
+  color: #ffbf00;
+}
+
+.css-10trblm:hover {
+  background-color: #152544;
+  color: #ffffff;
+}
+
+/* Image */
+.css-11v1u3b img {
+  border: 2px solid #ffbf00;
+}
+
+/* Text */
+.css-qrbaxs p {
+  color: #ffbf00;
+}
+
+/* Error messages */
+.css-19hj99j {
+  background-color: #2c374d;
+  color: #ffbf00;
+}
+
+/* Markdown */
+.css-1uix8eu h1, .css-1uix8eu h2, .css-1uix8eu h3, .css-1uix8eu h4, .css-1uix8eu h5, .css-1uix8eu h6, .css-1uix8eu p {
+  color: #ffbf00;
+}
+
+/* Links */
+a {
+  color: #ffbf00;
 }
 
-.nav {
-  margin-top: 0; /* Ensure no extra margin above the nav */
+a:hover {
+  color: #ffffff;
 }