Spaces:
Running
Running
File size: 3,313 Bytes
85bdb4e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import streamlit as st
from layout import gray_container, card_grid, key_concept, research_question
def render():
"""Module 2: Text-Image Relations in Historical Archives"""
st.title("Module 2: Text-Image Relations in Historical Archives")
col1, col2 = st.columns([1, 1])
with col1:
textual_content = """
<h3>Textual Elements</h3>
<ul>
<li><strong>Typography</strong>: Varying fonts, sizes, and styles</li>
<li><strong>Layout</strong>: Columns, margins, and spacing</li>
<li><strong>Marginalia</strong>: Notes, comments, and additions</li>
<li><strong>Decorative Text</strong>: Illuminated letters and calligraphy</li>
</ul>
"""
gray_container(textual_content)
visual_content = """
<h3>Visual Elements</h3>
<ul>
<li><strong>Illustrations</strong>: Diagrams, maps, and artistic representations</li>
<li><strong>Watermarks</strong>: Hidden identifiers that locate documents</li>
<li><strong>Damage</strong>: Tears, stains, and fading affecting legibility</li>
<li><strong>Material Features</strong>: Paper quality and physical dimensions</li>
</ul>
"""
gray_container(visual_content)
with col2:
interdependence_content = """
<h3>Interdependence</h3>
<p>The relationship between text and image in historical documents exists on a complex spectrum:</p>
<ul>
<li>Text functions as image (decorative headings)</li>
<li>Images function as text (symbolic representations)</li>
<li>Layout creates meaning through visual organization</li>
<li>Material conditions affect both textual and visual elements</li>
</ul>
"""
gray_container(interdependence_content)
# Display an example image
st.image("https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Book_of_Kells_folio_292r.jpg/800px-Book_of_Kells_folio_292r.jpg",
caption="Book of Kells - Example of text-image integration")
# OCR Challenges section
challenge_content = """
<h3>OCR Challenges</h3>
<p>These complex text-image relationships create particular challenges for OCR:</p>
"""
gray_container(challenge_content)
# Cards for OCR challenges
cards = [
"""
<h4>Distinguishing Text from Decoration</h4>
<p>Where does ornamental text end and functional text begin?</p>
""",
"""
<h4>Handling Illustrations</h4>
<p>Should they be processed as images or described as text?</p>
""",
"""
<h4>Interpreting Layout</h4>
<p>How to capture the significance of spacing and organization?</p>
""",
"""
<h4>Preserving Context</h4>
<p>Maintaining the relationship between textual and visual elements</p>
"""
]
card_grid(cards)
# Research question box
research_content = """
<h4>Research Question</h4>
<p>How do we approach documents where the visual presentation is as meaningful as the textual content itself?</p>
"""
research_question(research_content) |