Update app.py

app.py

@@ -13,9 +13,9 @@ def load_css():
     st.markdown("""
     <style>
     .main-header {
-        padding: 2rem;
+        padding: 0.5rem 0;
         text-align: center;
-        margin-bottom: 2rem;
+        margin: 0.5rem 0;
     }
     
     .citation-output {
@@ -28,33 +28,35 @@ def load_css():
     }
     
     .warning-box {
-        background: #f8f8f8;
+        background: #fff3f3;
         border: 1px solid #e0e0e0;
         border-radius: 4px;
         padding: 1rem;
         margin: 1rem 0;
+        color: #d32f2f;
     }
     
     .success-box {
-        background: #f8f8f8;
+        background: #e8f5e9;
         border: 1px solid #e0e0e0;
         border-radius: 4px;
         padding: 1rem;
         margin: 1rem 0;
+        color: #2e7d32;
     }
     
     .info-card {
         background: white;
         border-radius: 4px;
-        padding: 1.5rem;
-        margin: 1rem 0;
+        padding: 1rem;
+        margin: 0.5rem 0;
         border-left: 1px solid #e0e0e0;
     }
     
     .footer {
         text-align: center;
-        padding: 2rem;
-        margin-top: 2rem;
+        padding: 1rem;
+        margin-top: 1rem;
         border-top: 1px solid #e0e0e0;
         font-size: 0.9rem;
     }
@@ -71,7 +73,7 @@ def load_css():
     }
     
     .tab-content {
-        padding: 2rem 0;
+        padding: 0.5rem 0;
     }
     
     .datetime-display {
@@ -83,8 +85,8 @@ def load_css():
     }
     
     .rendered-citation {
-        margin: 1rem 0;
-        font-size: 1rem;
+        margin: 0.5rem 0;
+        font-size: 1.2rem;
     }
     </style>
     """, unsafe_allow_html=True)
@@ -112,7 +114,6 @@ def parse_citation_text(citation_text):
     # Match both "Author (Year)" and "(Author, Year)"
     match = re.match(r'^(?:(\w[\w\s.,&et al]+)\s*\((\d{4})\)|\((\w[\w\s.,&et al]+),\s*(\d{4})\))$', citation_text.strip())
     if match:
-        # If "Author (Year)" matches, take groups 1 and 2; if "(Author, Year)" matches, take groups 3 and 4
         author = match.group(1) or match.group(3)
         year = match.group(2) or match.group(4)
         author = author.strip()
@@ -123,17 +124,14 @@ def parse_url(url):
     if not url:
         return None, None
     try:
-        # Extract fragment text from URL
         match = re.search(r'#:~:text=([^&]+)', url)
         fragment_text = urllib.parse.unquote(match.group(1)) if match else None
-        # Extract base URL (before #)
         base_url = url.split('#')[0]
         return base_url, fragment_text
     except:
         return None, None
 
 def parse_hash_text(hash_text):
-    # Match "Author (Year). <hash>"
     match = re.match(r'.*?\(\d{4}\)\.\s*([0-9a-f]{64})', hash_text.strip())
     if match:
         return match.group(1)
@@ -194,45 +192,105 @@ load_css()
 st.markdown("""
 <div class="main-header">
     <h1>Smart Context Citation (SCC) Tool</h1>
-    <p>Next-generation digital referencing system for the age of Generative AI</p>
 </div>
 """, unsafe_allow_html=True)
 
-# Expandable section for About and Example
+# Expandable section for About SCC and Example Citation
 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.
+        <h3>About SCC</h3>
+        <p>The Smart Context Citation (SCC) style is a modern referencing system designed to enhance transparency and integrity in academic citations, particularly in the era of generative AI. It integrates context directly into citations, uses cryptographic hashes for verification, and eliminates the need for traditional reference lists.</p>
+        
+        <h4>Key Features</h4>
+        <ul>
+            <li><strong>Inline Citations:</strong> Uses author-year format, either "Author (Year)" or "(Author, Year)", hyperlinked to the source with a text fragment.</li>
+            <li><strong>SCC Index:</strong> A unique SHA-256 hash ensures citation authenticity, linked to metadata including username, task, date, and time.</li>
+            <li><strong>Benefits:</strong> Promotes digital fluency, ensures source traceability, prevents fabrication, and simplifies referencing.</li>
+        </ul>
+        
+        <h4>Technical Legitimacy</h4>
+        <p>The SCC style leverages the <a href="https://wicg.github.io/scroll-to-text-fragment/" target="_blank">W3C Text Fragments specification</a>, enabling precise linking to specific text within web pages. This ensures citations are contextually accurate and verifiable, aligning with modern web standards.</p>
     </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)
+        <h3>Example Citation</h3>
+        <p><strong>Inputs:</strong></p>
+        <ul>
+            <li><strong>Username:</strong> jdoe</li>
+            <li><strong>Task Name:</strong> Urban Design Thesis</li>
+            <li><strong>Author:</strong> Abuseif et al.</li>
+            <li><strong>Year:</strong> 2025</li>
+            <li><strong>URL:</strong> https://www.sciencedirect.com/science/article/pii/S2772411523000046</li>
+            <li><strong>Annotated Text:</strong> A proposed design framework for green roof settings in urban environments</li>
+        </ul>
+        <p><strong>Outputs:</strong></p>
+        <ul>
+            <li><strong>Citation (Start of Text):</strong> <span style="font-size: 1.2rem;">Abuseif et al. (2025)</span> (hyperlinked to the source URL with text fragment)</li>
+            <li><strong>Citation (End of Text):</strong> <span style="font-size: 1.2rem;">(Abuseif et al., 2025)</span> (hyperlinked to the source URL with text fragment)</li>
+            <li><strong>SCC Index:</strong> <span style="font-size: 0.85rem;">Abuseif et al. (2025). &lt;64-character SHA-256 hash&gt;</span> (hyperlinked to the source URL with metadata)</li>
+        </ul>
     </div>
+    """, unsafe_allow_html=True)
+
+# Expandable section for SCC Guidelines
+with st.expander("SCC Style Guidelines"):
+    st.markdown("""
+    <div class="info-card">
+        <h3>SCC Style Guidelines</h3>
+        <p>The Smart Context Citation (SCC) style ensures accurate, transparent, and verifiable citations. Follow these steps to generate and verify citations using the SCC Tool.</p>
+        
+        <h4>Generating Citations</h4>
+        <ol>
+            <li><strong>Access the Tool:</strong> Open the "Citation Generator" tab.</li>
+            <li><strong>Enter User Information:</strong>
+                <ul>
+                    <li><strong>Username:</strong> Your unique identifier (e.g., jdoe).</li>
+                    <li><strong>Task Name:</strong> The project or assignment name (e.g., Urban Design Thesis).</li>
+                </ul>
+            </li>
+            <li><strong>Enter Citation Information:</strong>
+                <ul>
+                    <li><strong>Author(s) Name:</strong> The author(s) of the source (e.g., Abuseif et al.).</li>
+                    <li><strong>Publication Year:</strong> The year of publication (e.g., 2025).</li>
+                    <li><strong>Source URL:</strong> The full URL of the source, without text fragments (e.g., https://www.sciencedirect.com/science/article/pii/S2772411523000046).</li>
+                    <li><strong>Annotated Text:</strong> The quoted or paraphrased text from the source (e.g., A proposed design framework for green roof settings).</li>
+                </ul>
+            </li>
+            <li><strong>Generate Citation:</strong> Click the "Generate Citation" button.</li>
+            <li><strong>Copy Outputs:</strong>
+                <ul>
+                    <li><strong>Citation (Start of Text):</strong> Use "Author (Year)" for the start of a sentence.</li>
+                    <li><strong>Citation (End of Text):</strong> Use "(Author, Year)" for in-text citations.</li>
+                    <li><strong>SCC Index:</strong> Copy the hash link (e.g., "Abuseif et al. (2025). &lt;hash&gt;") for verification.</li>
+                    <li>Right-click each link to copy the "Link Address" for verification.</li>
+                </ul>
+            </li>
+        </ol>
+        
+        <h4>Verifying Citations</h4>
+        <ol>
+            <li><strong>Access the Tool:</strong> Open the "Verify Citation" tab.</li>
+            <li><strong>Enter Citation Information:</strong>
+                <ul>
+                    <li><strong>Citation Text:</strong> Paste the citation text (e.g., "Abuseif et al. (2025)" or "(Abuseif et al., 2025)").</li>
+                    <li><strong>Citation URL:</strong> Paste the hyperlink URL from the citation (right-click and select "Copy Link Address").</li>
+                </ul>
+            </li>
+            <li><strong>Enter SCC Index Information:</strong>
+                <ul>
+                    <li><strong>SCC Index Text:</strong> Paste the hash text (e.g., "Abuseif et al. (2025). &lt;hash&gt;").</li>
+                    <li><strong>SCC Index URL:</strong> Paste the hyperlink URL from the hash (right-click and select "Copy Link Address").</li>
+                </ul>
+            </li>
+            <li><strong>Verify Citation:</strong> Click the "Verify Citation" button.</li>
+            <li><strong>Review Result:</strong>
+                <ul>
+                    <li><strong>Authentic Citation:</strong> Displayed in green if the hash matches, confirming integrity.</li>
+                    <li><strong>Unauthentic Citation:</strong> Displayed in red if the hash does not match, indicating potential tampering.</li>
+                </ul>
+            </li>
+        </ol>
     </div>
     """, unsafe_allow_html=True)
 
@@ -240,13 +298,12 @@ tabs = st.tabs(["Citation Generator", "Verify Citation"])
 
 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")
+        username = st.text_input("Username", help="Your username for tracking purposes", placeholder="e.g., jdoe")
     with col2:
         task_name = st.text_input("Task Name", help="The name of the task or project", placeholder="e.g., Literature Review Assignment")
 
@@ -293,7 +350,6 @@ 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
@@ -311,7 +367,7 @@ with tabs[0]:
                 st.markdown('</div>', unsafe_allow_html=True)
 
             # SCC Ledger
-            st.markdown("### SCC Ledger")
+            st.markdown("### SCC Index")
             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)
@@ -320,27 +376,19 @@ with tabs[0]:
 
 with tabs[1]:
     st.markdown('<div class="tab-content">', unsafe_allow_html=True)
-    st.header("Verify Citation")
-    st.markdown("""
-    <div class="info-card">
-    Copy the citation text (e.g., "Abuseif et al. (2025)" or "(Abuseif et al., 2025)") and its hyperlink URL from the 'Citation Generator' tab. Similarly, copy the hash text (e.g., "Abuseif et al. (2025). <hash>") and its hyperlink URL. Paste them into the fields below to verify the citation's authenticity. To copy the URL, right-click the hyperlink and select "Copy Link Address".
-    </div>
-    """, unsafe_allow_html=True)
-
-    # Input fields for citation and hash
     st.subheader("Citation Information")
     citation_text = st.text_input("Citation Text", help="Paste the citation text, e.g., 'Abuseif et al. (2025)' or '(Abuseif et al., 2025)'", placeholder="e.g., Abuseif et al. (2025)")
     citation_url = st.text_input("Citation URL", help="Paste the hyperlink URL from the citation, e.g., 'https://example.com#:~:text=fragment'", placeholder="e.g., https://example.com#:~:text=fragment")
 
-    st.subheader("Hash Information")
-    hash_text = st.text_input("Hash Text", help="Paste the hash text, e.g., 'Abuseif et al. (2025). <hash>'", placeholder="e.g., Abuseif et al. (2025). <hash>")
-    hash_url = st.text_input("Hash URL", help="Paste the hyperlink URL from the hash, e.g., 'https://example.com#:~:text=metadata'", placeholder="e.g., https://example.com#:~:text=metadata")
+    st.subheader("SCC Index")
+    hash_text = st.text_input("SCC Index Text", help="Paste the index text, e.g., 'Abuseif et al. (2025). <hash>'", placeholder="e.g., Abuseif et al. (2025). <hash>")
+    hash_url = st.text_input("SCC Index URL", help="Paste the hyperlink URL from the index, e.g., 'https://example.com#:~:text=metadata'", placeholder="e.g., https://example.com#:~:text=metadata")
 
     verify_button = st.button("Verify Citation", type="primary", use_container_width=True)
 
     if verify_button:
         if not all([citation_text, citation_url, hash_text, hash_url]):
-            st.error("Please provide all fields (citation text, citation URL, hash text, hash URL) before verifying.")
+            st.error("Please provide all fields (citation text, citation URL, SCC index text, SCC index URL) before verifying.")
         else:
             # Parse citation text
             author, year = parse_citation_text(citation_text)
@@ -354,9 +402,9 @@ with tabs[1]:
             username, task_name, date, time = parse_metadata(hash_fragment)
 
             if not all([author, year, citation_base_url, citation_fragment, scc_hash, hash_base_url, username, task_name, date, time]):
-                st.error("Invalid input format. Ensure the citation text, URLs, and hash text are correctly pasted from the generated output.")
+                st.error("Invalid input format. Ensure the citation text, URLs, and SCC index text are correctly pasted from the generated output.")
             elif citation_base_url != hash_base_url:
-                st.error("The citation URL and hash URL must point to the same base URL.")
+                st.error("The citation URL and SCC index URL must point to the same base URL.")
             else:
                 # Recompute hash
                 recomputed_hash = generate_citation_hash(
@@ -366,13 +414,13 @@ with tabs[1]:
                 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>Authentic citation!</strong>
                     </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>Unauthentic citation</strong>
                     </div>
                     """, unsafe_allow_html=True)