Update app.py

app.py

@@ -87,30 +87,114 @@ def classify_image(image):
     
     return predicted_class_name, predicted_scores, mineral_key_facts
 
+
+
+
+
+
+
+DESCRIPTION = '''
+<div>
+<h1 style="text-align: center;">Microscopic Mineral Identification App</h1>
+<p>Welcome to our interactive space dedicated to identifying minerals through microscopic imagery. This platform showcases various microscopic images that reveal the intricate patterns and characteristics of different minerals. To get started, you can explore our collection of mineral images or use your own to identify key features such as crystal structure, color variations, and inclusions.</p>
+<p>🔎 For a deeper understanding of mineral identification techniques and how to analyze microscopic mineral images, visit our comprehensive <a href="https://example.com/mineral-guide">mineral guide</a>. It provides insights into common mineralogical features and how to recognize them.</p>
+<p>🧪 Interested in more advanced mineralogy? Check out our <a href="https://example.com/advanced-mineralogy"><b>Advanced Mineralogy</b></a> section, where we dive into more complex mineral structures and analytical methods.</p>
+</div>
+'''
+
+
+# Welcome Message
+def welcome(name):
+    return f"Welcome to Gradio, {name}!"
+
+js = """
+function createGradioAnimation() {
+    var container = document.createElement('div');
+    container.id = 'gradio-animation';
+    container.style.fontSize = '2em';
+    container.style.fontWeight = 'bold';
+    container.style.textAlign = 'center';
+    container.style.marginBottom = '20px';
+
+    var text = 'Welcome to Gradio!';
+    for (var i = 0; i < text.length; i++) {
+        (function(i){
+            setTimeout(function(){
+                var letter = document.createElement('span');
+                letter.style.opacity = '0';
+                letter.style.transition = 'opacity 0.5s';
+                letter.innerText = text[i];
+
+                container.appendChild(letter);
+
+                setTimeout(function() {
+                    letter.style.opacity = '1';
+                }, 50);
+            }, i * 250);
+        })(i);
+    }
+
+    var gradioContainer = document.querySelector('.gradio-container');
+    gradioContainer.insertBefore(container, gradioContainer.firstChild);
+
+    return 'Animation created';
+}
+"""
+
+
 app_title = "Mineral Identification using AI"
 app_description = "This application uses advanced machine learning models to accurately identify and classify different types of minerals from images. Simply upload an image, and the system will provide the predicted mineral class along with its key characteristics and properties."
 
+custom_css = """
+.gradio-container {display: flex; justify-content: center; align-items: center; height: 100vh;}
+
+
+#title-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+#app-title {
+    margin-right: 20px; /* Adjust the spacing between the title and logo */
+}
+
+#logo-img {
+    width: 50px; /* Adjust the logo size as needed */
+    height: 50px;
+}
+
+"""
+
+
 with gr.Blocks(
-    title=app_title, 
-    css=".gradio-container {display: flex; justify-content: center; align-items: center; height: 100vh;}",
+    title=app_title,
+    css=custom_css,
     theme=gr.themes.Monochrome(),
-
+    js=js,
+) as demo:
+    gr.Markdown(DESCRIPTION)
     
-    
-    
-    
-    
-    
-    
-    ) as demo:
     # Your existing code for creating the interface components
     with gr.Row():
         image_input = gr.Image(elem_id="image_input", type="pil")
         output_components = [
-            gr.Textbox(label="Mineral Name",elem_id="predicted_class_name"),
-            gr.Textbox(label="Prediction Scores of Model",elem_id="predicted_scores", lines=5),
-            gr.Textbox(label="Key Facts About Mineral",elem_id="mineral_key_facts", lines=8)  # Added new Textbox for key facts
+            gr.Textbox(label="Mineral Name", elem_id="predicted_class_name"),
+            gr.Textbox(label="Prediction Scores of Model", elem_id="predicted_scores", lines=5),
+            gr.Textbox(label="Key Facts About Mineral", elem_id="mineral_key_facts", lines=8)
         ]
         image_button = gr.Button("Classify Mineral")
         image_button.click(classify_image, inputs=image_input, outputs=output_components)
-    demo.launch(auth=("admin", "pass1234"),auth_message="Welcome To Mineral Identification App.")
+
+    with gr.Row():
+        gr.Textbox(label="Mineral Detection", elem_id="mineral_detection_output", lines=3)
+        gr.Textbox(label="Mineral Classification", elem_id="mineral_classification_output", lines=3)
+        gr.Textbox(label="Mineral Key Facts", elem_id="mineral_key_facts_output", lines=8)
+    gr.Examples(
+        examples=["Gradio examples/Biotite1.jpg","Gradio examples/Biotite2.jpg","Gradio examples/Olivine1.jpg","Gradio examples/Plagioclase1.jpg"],
+        inputs=image_input,
+        
+
+    )
+    demo.launch( auth_message="Welcome To Mineral Identification App.")