Update app.py

app.py

@@ -18,8 +18,7 @@ def load_css():
         text-align: center;
         margin-bottom: 2rem;
     }
-    
-    .citation-output {
+    .citation-output, .warning-box, .success-box, .info-card, .footer, .hash-display, .tab-content, .datetime-display, .rendered-citation {
         background: #f8f8f8;
         border: 1px solid #e0e0e0;
         border-radius: 4px;
@@ -27,65 +26,13 @@ def load_css():
         margin: 1rem 0;
         font-family: 'Courier New', monospace;
     }
-    
-    .warning-box {
-        background: #f8f8f8;
-        border: 1px solid #e0e0e0;
-        border-radius: 4px;
-        padding: 1rem;
-        margin: 1rem 0;
-    }
-    
-    .success-box {
-        background: #f8f8f8;
-        border: 1px solid #e0e0e0;
-        border-radius: 4px;
-        padding: 1rem;
-        margin: 1rem 0;
-    }
-    
-    .info-card {
-        background: white;
-        border-radius: 4px;
-        padding: 1.5rem;
-        margin: 1rem 0;
-        border-left: 1px solid #e0e0e0;
-    }
-    
     .footer {
         text-align: center;
         padding: 2rem;
-        margin-top: 2rem;
-        border-top: 1px solid #e0e0e0;
         font-size: 0.9rem;
     }
-    
-    .hash-display {
-        background: #f8f8f8;
-        border: 1px solid #e0e0e0;
-        border-radius: 4px;
-        padding: 1rem;
-        font-family: 'Courier New', monospace;
-        font-size: 0.85rem;
-        word-break: break-all;
-        margin: 0.5rem 0;
-    }
-    
-    .tab-content {
-        padding: 2rem 0;
-    }
-    
     .datetime-display {
-        background: #f8f8f8;
-        border-radius: 4px;
-        padding: 0.8rem;
-        margin: 0.5rem 0;
-        border-left: 1px solid #e0e0e0;
-    }
-    
-    .rendered-citation {
-        margin: 1rem 0;
-        font-size: 1rem;
+        font-family: sans-serif;
     }
     </style>
     """, unsafe_allow_html=True)
@@ -127,32 +74,6 @@ def parse_metadata_hash(metadata_html):
             return scc_hash, username, task_name, date, time
     return None, None, None, None, None
 
-# --- JavaScript for capturing pasted links ---
-def verification_js():
-    return """
-    <script>
-    function updateCitationData(inputId, outputId) {
-        const input = document.getElementById(inputId);
-        const output = document.getElementById(outputId);
-        if (input && output) {
-            const link = input.querySelector('a');
-            output.value = link ? link.outerHTML : '';
-            // Dispatch input event to trigger Streamlit update
-            const event = new Event('input', { bubbles: true });
-            output.dispatchEvent(event);
-        }
-    }
-
-    document.getElementById('citation_input').addEventListener('paste', function(e) {
-        setTimeout(() => updateCitationData('citation_input', 'citation_output'), 100);
-    });
-
-    document.getElementById('hash_input').addEventListener('paste', function(e) {
-        setTimeout(() => updateCitationData('hash_input', 'hash_output'), 100);
-    });
-    </script>
-    """
-
 # --- Live Clock JavaScript ---
 def live_clock():
     return """
@@ -189,10 +110,8 @@ def live_clock():
 # --- Streamlit App ---
 st.set_page_config(layout="wide", page_title="Smart Context Citation Tool")
 
-# Load custom CSS
 load_css()
 
-# Main header
 st.markdown("""
 <div class="main-header">
     <h1>Smart Context Citation (SCC) Tool</h1>
@@ -200,93 +119,57 @@ st.markdown("""
 </div>
 """, unsafe_allow_html=True)
 
-# Expandable section for About and Example
 with st.expander("About SCC and Example Citation"):
     st.markdown("""
     <div class="info-card">
     <h3>About SCC</h3>
     The Smart Context Citation (SCC) style is a next-generation digital referencing system designed for the age of Generative AI. It embeds citation context directly in the document, uses cryptographic hash signatures for integrity, and eliminates traditional reference lists.
-
-    <strong>Purpose:</strong> Transparency, integrity, and digital fluency in citations.
-
-    <strong>Structure:</strong>
-    - Inline general author name and date style citation
-    - Hyperlinked URL with text fragment (#:~:text=)
-    - SHA-256 hash for verification
-
-    <strong>Benefits:</strong> Enhances fairness, integrates with source contexts, promotes digital fluency, prevents fabrication, and eliminates traditional reference lists.
-
-    <strong>Technical Legitimacy:</strong> Referencing the <a href="https://wicg.github.io/scroll-to-text-fragment/" target="_blank">Text Fragments WICG specification</a> for technical legitimacy.
     </div>
-    
     <div class="info-card">
     <h3>Example Citation</h3>
-    <strong>Input:</strong><br>
-    - Author: <code>Abuseif et al.</code><br>
-    - Year: <code>2025</code><br>
-    - URL: <code>https://www.sciencedirect.com/science/article/pii/S2772411523000046</code><br>
-    - Text: <code>A proposed design framework for green roof settings in general and trees on buildings</code><br>
-
-    <strong>Output (Start of Text):</strong><br>
-    <div class="rendered-citation">
-        Abuseif et al. (2025)
-    </div>
-    <strong>Output (End of Text):</strong><br>
-    <div class="rendered-citation">
-        (Abuseif et al., 2025)
-    </div>
+    Author: <code>Abuseif et al.</code> <br>
+    Year: <code>2025</code><br>
+    URL: <code>https://www.sciencedirect.com/science/article/pii/S2772411523000046</code><br>
+    Text: <code>A proposed design framework for green roof settings in general and trees on buildings</code>
     </div>
     """, unsafe_allow_html=True)
 
 tabs = st.tabs(["Citation Generator", "Verify Citation"])
 
+# --- Citation Generator ---
 with tabs[0]:
     st.markdown('<div class="tab-content">', unsafe_allow_html=True)
     st.header("Generate New Citation")
 
-    # User Information Section
     st.subheader("User Information")
     col1, col2 = st.columns(2)
-    with col1:
-        username = st.text_input("Username", help="Your username for tracking purposes", placeholder="e.g., john_doe")
-    with col2:
-        task_name = st.text_input("Task Name", help="The name of the task or project", placeholder="e.g., Literature Review Assignment")
+    username = col1.text_input("Username", placeholder="e.g., john_doe")
+    task_name = col2.text_input("Task Name", placeholder="e.g., Literature Review")
 
-    # Citation Info Section
     st.subheader("Citation Info")
     col3, col4 = st.columns(2)
-    with col3:
-        author_name = st.text_input("Author(s) Name", help="The author(s) of the source", placeholder="e.g., Smith or Smith et al.")
-    with col4:
-        publication_year = st.text_input("Publication Year", help="The year of publication", placeholder="e.g., 2023")
-    
+    author_name = col3.text_input("Author(s) Name", placeholder="e.g., Smith et al.")
+    publication_year = col4.text_input("Publication Year", placeholder="e.g., 2023")
+
     col5, col6 = st.columns(2)
-    with col5:
-        source_url = st.text_input("Source URL", help="The full URL of the source", placeholder="https://example.com/article")
-    with col6:
-        annotated_text = st.text_input("Annotated Text", help="The text quoted or paraphrased from the source", placeholder="e.g., Thermal comfort thresholds...")
+    source_url = col5.text_input("Source URL", placeholder="https://example.com/article")
+    annotated_text = col6.text_input("Annotated Text", placeholder="e.g., Thermal comfort thresholds...")
 
-    # Live date and time display
     st.markdown("### Current Date and Time")
     components.html(live_clock(), height=50)
 
-    # Get current date and time in Melbourne timezone for hash generation
     melbourne_tz = pytz.timezone(MELBOURNE_TIMEZONE)
     current_datetime_melbourne = datetime.now(melbourne_tz)
     current_date = current_datetime_melbourne.strftime("%Y-%m-%d")
     current_time = current_datetime_melbourne.strftime("%H:%M:%S")
 
-    generate_button = st.button("Generate Citation", type="primary", use_container_width=True)
-
-    if generate_button:
+    if st.button("Generate Citation", type="primary", use_container_width=True):
         if not all([username, task_name, author_name, publication_year, source_url, annotated_text]):
-            st.error("Please fill in all fields before generating a citation.")
+            st.error("Please fill in all fields.")
         elif check_for_fragment(source_url):
             st.markdown("""
             <div class="warning-box">
-                <strong>Warning:</strong> It seems like your URL already contains a text fragment (<code>#:~:text=</code>). 
-                This suggests you may have used AI assistance in generating this link. Please go back to the original source, 
-                read the context carefully, and copy the source link again without any existing fragment.
+                <strong>Warning:</strong> Your URL already includes a text fragment. Please use the original source URL.
             </div>
             """, unsafe_allow_html=True)
         else:
@@ -295,111 +178,61 @@ with tabs[0]:
             citation_link_end = f'<a href="{source_url}#:~:text={urllib.parse.quote(annotated_text)}" data-hash="{scc_hash}">({author_name}, {publication_year})</a>'
             metadata_link = format_metadata_html(source_url, author_name, publication_year, scc_hash, username, task_name, current_date, current_time)
 
-            st.markdown("## Generated Citations")
             col_html1, col_html2 = st.columns(2)
 
-            # HTML Citation - Start of Text
             with col_html1:
                 st.markdown("### Citation (Start of Text)")
-                st.markdown('<div class="rendered-citation">', unsafe_allow_html=True)
-                st.markdown(citation_link_start, unsafe_allow_html=True)
-                st.markdown('</div>', unsafe_allow_html=True)
+                st.markdown('<div class="rendered-citation">' + citation_link_start + '</div>', unsafe_allow_html=True)
 
-            # HTML Citation - End of Text
             with col_html2:
                 st.markdown("### Citation (End of Text)")
-                st.markdown('<div class="rendered-citation">', unsafe_allow_html=True)
-                st.markdown(citation_link_end, unsafe_allow_html=True)
-                st.markdown('</div>', unsafe_allow_html=True)
+                st.markdown('<div class="rendered-citation">' + citation_link_end + '</div>', unsafe_allow_html=True)
 
-            # SCC Ledger
             st.markdown("### SCC Ledger")
-            st.markdown('<div class="hash-display">', unsafe_allow_html=True)
-            st.markdown(metadata_link, unsafe_allow_html=True)
-            st.markdown('</div>', unsafe_allow_html=True)
-    
+            st.markdown('<div class="hash-display">' + metadata_link + '</div>', unsafe_allow_html=True)
+
     st.markdown('</div>', unsafe_allow_html=True)
 
+# --- Verify Citation ---
 with tabs[1]:
     st.markdown('<div class="tab-content">', unsafe_allow_html=True)
     st.header("Verify Citation")
-    st.markdown("""
-    <div class="info-card">
-    Paste the rendered citation and hash links (e.g., "Author (Year)" and "Author (Year). Hash") directly from the 'Citation Generator' tab to verify the citation's authenticity.
-    </div>
-    """, unsafe_allow_html=True)
-
-    # Input fields for citation and hash
-    st.markdown("""
-    <div>
-        <label>Paste Citation (with embedded link)</label>
-        <div id="citation_input" contenteditable="true" style="border: 1px solid #e0e0e0; border-radius: 4px; padding: 0.5rem; min-height: 50px; margin-bottom: 1rem;"></div>
-        <input type="hidden" id="citation_output" name="citation_output" value="">
-        <label>Paste Hash (with embedded link)</label>
-        <div id="hash_input" contenteditable="true" style="border: 1px solid #e0e0e0; border-radius: 4px; padding: 0.5rem; min-height: 50px; margin-bottom: 1rem;"></div>
-        <input type="hidden" id="hash_output" name="hash_output" value="">
-    </div>
-    """, unsafe_allow_html=True)
-
-    # Add JavaScript to capture pasted link data
-    components.html(verification_js(), height=0)
-
-    # Initialize session state
-    if 'citation_html' not in st.session_state:
-        st.session_state.citation_html = ''
-    if 'hash_html' not in st.session_state:
-        st.session_state.hash_html = ''
-
-    # Hidden text inputs to capture JavaScript data
-    citation_html = st.text_input("Citation HTML", key="citation_output", value=st.session_state.citation_html, label_visibility="collapsed")
-    hash_html = st.text_input("Hash HTML", key="hash_output", value=st.session_state.hash_html, label_visibility="collapsed")
 
-    # Update session state
-    if citation_html != st.session_state.citation_html:
-        st.session_state.citation_html = citation_html
-    if hash_html != st.session_state.hash_html:
-        st.session_state.hash_html = hash_html
+    st.subheader("Paste Citation and Hash (as generated above)")
+    citation_html = st.text_area("Paste Citation (with embedded link)", height=150)
+    hash_html = st.text_area("Paste Hash (with embedded link)", height=150)
 
-    verify_button = st.button("Verify Citation", type="primary", use_container_width=True)
-
-    if verify_button:
-        if not (st.session_state.citation_html and st.session_state.hash_html):
+    if st.button("Verify Citation", type="primary", use_container_width=True):
+        if not (citation_html and hash_html):
             st.error("Please paste both the citation and hash links before verifying.")
         else:
-            # Parse citation
-            author, year, url, fragment_text, citation_hash = parse_citation(st.session_state.citation_html)
-            # Parse hash and metadata
-            scc_hash, username, task_name, date, time = parse_metadata_hash(st.session_state.hash_html)
+            author, year, url, fragment_text, citation_hash = parse_citation(citation_html)
+            scc_hash, username, task_name, date, time = parse_metadata_hash(hash_html)
 
             if not all([author, year, url, fragment_text, scc_hash, username, task_name, date, time]):
-                st.error("Invalid citation or hash format. Please ensure both inputs are correctly pasted links from the generated output.")
+                st.error("Invalid format. Please check both the citation and hash inputs.")
             else:
-                # Recompute hash
-                recomputed_hash = generate_citation_hash(
-                    author, year, url, fragment_text, fragment_text, username, task_name, date, time
-                )
-
+                recomputed_hash = generate_citation_hash(author, year, url, fragment_text, fragment_text, username, task_name, date, time)
                 if recomputed_hash == scc_hash:
                     st.markdown("""
                     <div class="success-box">
-                        <strong>Hash verified successfully!</strong> The citation is authentic and hasn't been tampered with.
+                        ✅ <strong>Hash verified successfully!</strong> The citation is authentic and untampered.
                     </div>
                     """, unsafe_allow_html=True)
                 else:
                     st.markdown("""
                     <div class="warning-box">
-                        <strong>Hash verification failed!</strong> The citation may have been altered or is not authentic.
+                        ❌ <strong>Hash verification failed!</strong> Citation may have been altered.
                     </div>
                     """, unsafe_allow_html=True)
 
     st.markdown('</div>', unsafe_allow_html=True)
 
-# Footer
+# --- Footer ---
 st.markdown("""
 <div class="footer">
     Developed by: Dr Majed Abuseif<br>
-    School of Architecture and Built Environment<br>
-    Deakin University<br>
+    School of Architecture and Built Environment, Deakin University<br>
     © 2025
 </div>
-""", unsafe_allow_html=True)
+""", unsafe_allow_html=True)