Spaces:
Running
Running
| 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) |