UI updated

app.py

@@ -1,4 +1,6 @@
 # imports
+import base64
+import os
 import streamlit as st
 import tensorflow as tf
 from tensorflow.keras.models import Sequential
@@ -24,6 +26,7 @@ st.markdown(
     unsafe_allow_html=True
 )
 
+# load model weights
 @st.cache_resource
 def load_models():
     # Load all models at once
@@ -36,7 +39,6 @@ def load_models():
 eff_net_model, eff_net_art_model, cnn_model = load_models()
 
 # CNN model
-
 def run_cnn(img_arr):
     my_model = Sequential()
     my_model.add(Conv2D(
@@ -70,6 +72,7 @@ def run_cnn(img_arr):
     prediction = my_model.predict(img_arr)
     return prediction
 
+# efficientnet model
 def run_effNet(img_arr):
     try:
         resolver = tf.distribute.cluster_resolver.TPUClusterResolver()
@@ -82,6 +85,7 @@ def run_effNet(img_arr):
             prediction = eff_net_model.predict(img_arr)
     return prediction
  
+# efficientnet art model
 def run_effNet_Art(img_arr):
     try:
         resolver = tf.distribute.cluster_resolver.TPUClusterResolver()
@@ -94,13 +98,14 @@ def run_effNet_Art(img_arr):
             prediction = eff_net_art_model.predict(img_arr)
     return prediction
 
+# preprocess images for efficient net
 def pre_process_img_effNet(image):
     img = load_img(image, target_size=(300, 300))  # Resize image to model input size
     img_arr = img_to_array(img)  # Convert to array
     img_arr = np.expand_dims(img_arr, axis=0) # Add batch dimension
     result = run_effNet(img_arr)
     return result
-
+# preprocess images for efficient net art
 def pre_process_img_effNetArt(image):
     img = load_img(image, target_size=(224, 224))  # Resize image to model input size
     img_arr = img_to_array(img)  # Convert to array
@@ -116,66 +121,110 @@ def pre_process_img(image):
         img_arr = img_arr.reshape((1, 256, 256, 3))  # Add batch dimension
         result = run_cnn(img_arr)
         return result
-# title
-st.markdown(
-    """<p class = "title"> AI vs REAL Image Detection </p>""",
-    unsafe_allow_html= True
-)
-
-# upload image
-st.markdown(
-     """<p class = "upload_line"> Please upload the image </p>""",
-    unsafe_allow_html= True
-)
-
-# introduce states
-if "prev_image" not in st.session_state:
-    st.session_state.prev_image = None 
-if "reset_model" not in st.session_state:
-    st.session_state.reset_model = False
-if "model_key" not in st.session_state:
-    st.session_state.model_key = "default_model_key"
-
-user_image = st.file_uploader("png, jpg, or jpeg image", ['png', 'jpg', 'jpeg'], label_visibility='hidden')
-if user_image != st.session_state.prev_image:
-    if st.session_state.prev_image is not None: 
-        st.session_state.model_key = "reset_model_key" if st.session_state.model_key == "default_model_key" else "default_model_key"
-        st.session_state.reset_model = True
-    st.session_state.prev_image = user_image  # set prev image to current image 
-
-model_name = st.selectbox(
-    'Choose a model',
-    ['CNN', 'Efficientnet', 'Efficientnet Art'],
-    index=None,
-    placeholder='choose an option',
-    key=st.session_state.model_key
-)
-result_placeholder = st.empty()
-
-# design animation elements
-with open("styles/detectiveMag.svg", "r") as file:
-    svg_content_detective_Mag = file.read()
 
-# First magnifying glass starts at bottom-right
-st.markdown(
-    f"<div class='detectiveMag1' style='bottom: 0%; right: 0%;'>{svg_content_detective_Mag}</div>",
-    unsafe_allow_html=True
-)
-
-# Second magnifying glass starts slightly higher up the diagonal
-st.markdown(
-    f"<div class='detectiveMag2' style='bottom: 10%; right: 10%;'>{svg_content_detective_Mag}</div>",
-    unsafe_allow_html=True
-)
 
-# Third magnifying glass starts further up the diagonal
-st.markdown(
-    f"<div class='detectiveMag3' style='bottom: 20%; right: 20%;'>{svg_content_detective_Mag}</div>",
-    unsafe_allow_html=True
-)
+#UI
+
+#title
+col1, col2, col3,col4, col5 = st.columns([4,1,3,3,1],  gap="small")
+
+# In the first column, display the image
+with col1:
+    st.write('')
+with col2:
+    st.image("styles/robot.png")
+
+# In the second column, display the text
+with col3:
+    st.markdown(
+        """
+        <p class="title"> AI vs REAL Image Detection </p>
+        """,
+        unsafe_allow_html=True
+    )
+with col4:
+    st.write('')
+with col5:
+    st.write('')
+
+# division between photo and other widget component
+main_col_one, main_col_two = st.columns([2,2], gap="large")
+#photo column
+with main_col_one:
+    # Create a placeholder for the image
+    image_placeholder = st.empty()
+
+with main_col_two:
+    with open("styles/detectiveMag.svg", "r") as file:
+        svg_content_detective_Mag = file.read()
+
+    #alignment between magnifying glass image and upload line
+    col1, col2, col3,col4 = st.columns([4,4,1,3],  gap="small")
+    with col1:
+        st.write('')
+    with col2:
+        st.markdown(
+            """<p class = "upload_line"> Please upload the image </p>""",
+            unsafe_allow_html= True
+        )
+    with col3:
+        st.markdown(
+        f"<div class='detectiveMag1' style='bottom: 0%; right: 0%;'>{svg_content_detective_Mag}</div>",
+        unsafe_allow_html=True
+    )
+    with col4:
+        st.write('')
+
+
+                
+    # introduce states
+    if "prev_image" not in st.session_state:
+        st.session_state.prev_image = None 
+    if "reset_model" not in st.session_state:
+        st.session_state.reset_model = False
+    if "model_key" not in st.session_state:
+        st.session_state.model_key = "default_model_key"
+
+
+
+    # Upload image widget
+    user_image = st.file_uploader("png, jpg, or jpeg image", ['png', 'jpg', 'jpeg'], label_visibility='hidden')
+
+    if user_image:
+    # Convert the image to base64 encoding
+        image_bytes = user_image.read()
+        image_base64 = base64.b64encode(image_bytes).decode('utf-8')
+
+        # Display the image centered using HTML
+        image_placeholder.markdown(
+            f'<div style="display: flex; justify-content: center;">'
+            f'<img src="data:image/jpeg;base64,{image_base64}" max-width:"100%" height:"auto"/>'
+            f'</div>',
+            unsafe_allow_html=True
+        )
+
+    # model name select box widget reset condition. reset model name when a new image is uploaded
+    if user_image != st.session_state.prev_image:
+        if st.session_state.prev_image is not None: 
+            st.session_state.model_key = "reset_model_key" if st.session_state.model_key == "default_model_key" else "default_model_key"
+            st.session_state.reset_model = True
+        st.session_state.prev_image = user_image  # set prev image to current image 
+
+    # model name select box widget
+    model_name = st.selectbox(
+        'Choose a model',
+        ['CNN', 'Efficientnet', 'Efficientnet Art'],
+        index=None,
+        placeholder='choose an option',
+        key=st.session_state.model_key
+    )
+
+    # placeholder to display result
+    result_placeholder = st.empty()
 
 if user_image is not None and model_name is not None:
     predictions = []
+    # preprocess image and run the user selected model
     if model_name == 'CNN':
         print('CNN is running')
         predictions = pre_process_img(user_image)
@@ -187,14 +236,14 @@ if user_image is not None and model_name is not None:
         predictions = pre_process_img_effNetArt(user_image)
 
     if predictions[0] < 0.5:
-         result_word = "FAKE"
+         result_word = "AI Generated"
     else:
          result_word = "REAL"
 
+    # display the result and the prediction
     if user_image is not None:
         if len(predictions) > 0: 
-            result_placeholder.markdown(f"<div class='result'> <span class = 'prediction'>Prediction: {predictions[0][0]}</span> <br> It is a <span class = resultword> {result_word} </span> image. </div>", unsafe_allow_html=True)
-            
+            result_placeholder.markdown(f"<div class='result'> <span class = 'prediction'>Prediction: {predictions[0][0]:.2%}</span> <br> It is a <span class = resultword> {result_word} </span> image. </div>", unsafe_allow_html=True)
 
     print(model_name)
     print(predictions[0])

styles/style.css

@@ -1,8 +1,9 @@
 /* Reset and global styles */
 * {
-  margin: 0;
   box-sizing: border-box;
-  background-color: #001220 !important;
+  /* background-color: #001220 !important; */
+  background-color:#0f0f31 !important;
+ 
 }
 
 html,
@@ -16,12 +17,24 @@ body {
 /* Title Styling */
 .title {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  font-size: 2em; /* Scalable font size */
+  font-size: 32px; /* Scalable font size */
   text-align: center;
-  background: linear-gradient(to right, #16f0da 0%, #ff93ed 100%);
+  background: linear-gradient(to right, #5af9fb 0%, #1C6DF3 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  margin: 0 !important;
+  margin-top: 0 !important;
+  
+}
+/* robot image */
+.st-emotion-cache-1xf0csu {
+  max-width: 55px !important;
+}
+
+/* main container */
+.stMainBlockContainer {
+  padding-left: 5rem;
+  padding-right: 5rem;
+  max-width: 100%;
 }
 
 /* Upload Line */
@@ -32,6 +45,31 @@ body {
   color: white;
   margin: 1em 0;
 }
+
+/* upload image widget customization */
+.stFileUploader span, button {
+    color: white !important; /* Set the font color to white */
+}
+
+.stSelectbox label {
+    color: white; 
+}
+.stSelectbox > div div {
+    color: white; 
+}
+
+/* select box widget customization*/
+.st-cf {
+ color: white !important;
+}
+
+.stSelectbox div[data-baseweb="select"] > div:first-child {
+    border-color: #2d408d;
+}
+.st-emotion-cache-sy3zga {
+  color: white !important;
+}
+
 @keyframes blink {
   25% {
     opacity: 0.5;
@@ -44,23 +82,13 @@ body {
   }
 }
 /* Base styles for magnifying glasses */
-.detectiveMag1,
-.detectiveMag2,
-.detectiveMag3 {
-  position: fixed;
+.detectiveMag1{
   width: 10vw;
   max-width: 100px;
   max-height: 100px;
   animation: blink 6s infinite linear;
 }
 
-.detectiveMag2 {
-  animation-delay: 2s;
-}
-
-.detectiveMag3 {
-  animation-delay: 4s;
-}
 
 /* Result Styling */
 .result {
@@ -76,10 +104,10 @@ body {
   text-transform: uppercase;
   background-image: linear-gradient(
     -225deg,
-    #aae2e5 0%,
-    #edaee8 29%,
-    #421f7e 67%,
-    #ff0099 100%
+    #8ad8e6 0%,
+    #a438f2 29%,
+    #ff007f 67%,
+    #e8a7c8 100%
   );
   background-size: auto auto;
   background-clip: border-box;
@@ -115,43 +143,19 @@ body {
   .upload_line {
     font-size: 0.9rem;
   }
-
-  .detectiveMag1,
-  .detectiveMag2,
-  .detectiveMag3 {
-    width: 12vw; /* Slightly larger magnifying glasses */
-  }
-
   .result {
     font-size: 1.2rem;
   }
 }
 
-@media (max-width: 924px) {
-  .detectiveMag1,
-  .detectiveMag2,
-  .detectiveMag3 {
-    width: 10vw; /* Larger magnifying glasses */
-    background-color: transparent !important;
-  }
-}
-
 @media (max-width: 768px) {
   .title {
     font-size: 1.5em;
   }
-
   .upload_line {
     font-size: 0.8rem;
   }
 
-  .detectiveMag1,
-  .detectiveMag2,
-  .detectiveMag3 {
-    width: 15vw; /* Larger magnifying glasses */
-    background-color: transparent !important;
-  }
-
   .result {
     font-size: 1rem;
   }
@@ -159,27 +163,23 @@ body {
 
 @media (max-width: 480px) {
   .title {
-    font-size: 1.2em;
-  }
-  .upload_line {
-    font-size: 0.7rem;
-  }
-
-  .detectiveMag1,
-  .detectiveMag2,
-  .detectiveMag3 {
-    width: 20vw; /* Even larger magnifying glasses */
+    font-size: 16px !important;
   }
+  /* robot image */
+.st-emotion-cache-1xf0csu {
+  display: none;
+}
+.upload_line {
+  margin:0rem !important;
+}
+.detectiveMag1{
+ display: none;
+}
+.st-emotion-cache-ocqkz7 {
+  gap: 0 !important;
+}
 
   .result {
     font-size: 0.9rem;
   }
 }
-
-@media (max-width: 390px) {
-  .detectiveMag1,
-  .detectiveMag2,
-  .detectiveMag3 {
-    visibility: hidden;
-  }
-}