Update app.py

app.py

@@ -104,6 +104,11 @@ def load_css():
         border-radius: 4px;
         overflow: hidden;
     }
+    
+    .rendered-citation {
+        margin: 1rem 0;
+        font-size: 1rem;
+    }
     </style>
     """, unsafe_allow_html=True)
 
@@ -117,9 +122,6 @@ def format_citation_html(url, fragment_text, author, year, scc_hash):
     full_url = f"{url}#:~:text={encoded_fragment}"
     return f'<a href="{full_url}" data-hash="{scc_hash}">{author}, {year}</a>'
 
-def check_for_fragment(url):
-    return '#:~:text=' in url
-
 def copy_to_clipboard_js(text, button_id):
     """Generate JavaScript for copying text to clipboard"""
     return f"""
@@ -214,9 +216,13 @@ with st.expander("About SCC and Example Citation"):
     - 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 (HTML):</strong><br>
-    <div class="hash-display">
-    &lt;a href="https://www.sciencedirect.com/science/article/pii/S2772411523000046#:~:text=A%20proposed%20design%20framework%20for%20green%20roof%20settings%20in%20general%20and%20trees%20on%20buildings" data-hash="[GENERATED_HASH]"&gt;Abuseif et al., 2025&lt;/a&gt;
+    <strong>Output (Start of Text):</strong><br>
+    <div class="rendered-citation">
+        Abuseif et al. (2025) A proposed design framework for green roof settings in general and trees on buildings
+    </div>
+    <strong>Output (End of Text):</strong><br>
+    <div class="rendered-citation">
+        (Abuseif et al., 2025) A proposed design framework for green roof settings in general and trees on buildings
     </div>
     </div>
     """, unsafe_allow_html=True)
@@ -274,27 +280,28 @@ with tabs[0]:
             """, unsafe_allow_html=True)
         else:
             scc_hash = generate_citation_hash(author_name, publication_year, source_url, annotated_text, annotated_text, username, task_name, current_date, current_time)
+            citation_link = format_citation_html(source_url, annotated_text, author_name, publication_year, scc_hash)
 
             st.markdown("## Generated Citations")
             col_html1, col_html2 = st.columns(2)
 
             # HTML Citation - Start of Text
             with col_html1:
-                st.markdown("### HTML Citation (Start of Text)")
-                html_citation_start = f'"{annotated_text}" (<a href="{source_url}#:~:text={urllib.parse.quote(annotated_text)}" data-hash="{scc_hash}">{author_name}, {publication_year}</a>)'
+                st.markdown("### Citation (Start of Text)")
+                html_citation_start = f'{citation_link} {annotated_text}'
                 
-                st.markdown('<div class="citation-output">', unsafe_allow_html=True)
-                st.code(html_citation_start, language='html')
+                st.markdown('<div class="rendered-citation">', unsafe_allow_html=True)
+                st.markdown(html_citation_start, unsafe_allow_html=True)
                 st.markdown(copy_to_clipboard_js(html_citation_start.replace('`', '\\`'), "html_start"), unsafe_allow_html=True)
                 st.markdown('</div>', unsafe_allow_html=True)
 
             # HTML Citation - End of Text
             with col_html2:
-                st.markdown("### HTML Citation (End of Text)")
-                html_citation_end = f'(<a href="{source_url}#:~:text={urllib.parse.quote(annotated_text)}" data-hash="{scc_hash}">{author_name}, {publication_year}</a>) "{annotated_text}"'
+                st.markdown("### Citation (End of Text)")
+                html_citation_end = f'({citation_link}) {annotated_text}'
                 
-                st.markdown('<div class="citation-output">', unsafe_allow_html=True)
-                st.code(html_citation_end, language='html')
+                st.markdown('<div class="rendered-citation">', unsafe_allow_html=True)
+                st.markdown(html_citation_end, unsafe_allow_html=True)
                 st.markdown(copy_to_clipboard_js(html_citation_end.replace('`', '\\`'), "html_end"), unsafe_allow_html=True)
                 st.markdown('</div>', unsafe_allow_html=True)
 
@@ -317,22 +324,7 @@ with tabs[0]:
             st.json(hash_details)
             st.markdown('</div>', unsafe_allow_html=True)
 
-    # Instructions section
-    st.markdown("## Instructions for Copying to Word")
-    st.markdown("""
-    <div class="info-card">
-    <strong>To use the generated HTML citation in Microsoft Word:</strong><br><br>
-    1. Copy the desired HTML citation (Start or End of Text) using the 'Copy to Clipboard' button<br>
-    2. In Word, go to the 'Insert' tab<br>
-    3. Click on 'Object' → 'Text from File...'<br>
-    4. Select 'HTML Document' from the file type dropdown<br>
-    5. Paste the copied HTML into a new text file (e.g., using Notepad) and save it with a <code>.html</code> extension<br>
-    6. Select this <code>.html</code> file in the 'Text from File...' dialog<br><br>
-    
-    <strong>Alternative method:</strong> You might be able to paste directly into Word and then right-click and choose 'Keep Source Formatting' or 'Merge Formatting' if available, but the 'Text from File' method is more reliable for preserving hyperlinks and data attributes.
-    </div>
-    """, unsafe_allow_html=True)
-
+    # Guidance on Verifying Citations
     st.markdown("## Guidance on Verifying Citations")
     st.markdown("""
     <div class="info-card">