scheitelpunk commited on
Commit
9615f13
·
1 Parent(s): c8b22b4

✅ UI Examples Update Complete:

Browse files

Neue Platzierung:
- gr.Examples ist jetzt direkt nach dem Process-Button in der Input-Spalte
- 15 cutting-edge Domain-Beispiele sind sichtbar und klickbar
- Sidebar Examples aktualisiert mit modernen Domain-Beispielen

Was Benutzer jetzt sehen:
1. Haupt-Examples: gr.Examples mit allen 15 wissenschaftlichen Beispielen
2. Sidebar Quick-Insert: 3 repräsentative Beispiele mit Insert-Buttons
3. Konsistentes Design: Beide zeigen die neuen Domain-Beispiele

Die Examples sollten jetzt prominent sichtbar sein in der UI, direkt unter dem Process-Button!
Benutzer können:
- Klicken auf die gr.Examples für vollständige Eingabe
- Insert-Buttons in der Sidebar für schnelles Ausprobieren

Die Beispiele zeigen jetzt cutting-edge Domains von Drug Design bis Manufacturing! 🧬⚗️🏭

Files changed (1) hide show
  1. app.py +30 -29
app.py CHANGED
@@ -1805,6 +1805,29 @@ def create_beautiful_interface():
1805
  variant="primary",
1806
  size="lg"
1807
  )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1808
 
1809
  with gr.Column(scale=1):
1810
  gr.HTML("""
@@ -1831,19 +1854,19 @@ def create_beautiful_interface():
1831
  </div>
1832
 
1833
  <div style="margin-top: 20px; padding: 15px; background: rgba(102, 126, 234, 0.1); border-radius: 10px;">
1834
- <h4 style="color: #667eea; margin: 0 0 10px 0;">🎯 Try These Examples:</h4>
1835
  <div style="font-size: 0.9em; color: #555;">
1836
  <div style="display: flex; align-items: center; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 8px;">
1837
- <span style="flex: 1;"><strong>Robotics:</strong> "The arm moves the component above the platform"</span>
1838
- <button onclick="document.querySelector('textarea').value = 'The robotic arm moves the satellite component above the assembly platform while the crystal detector rotates around its central axis.'; document.querySelector('textarea').dispatchEvent(new Event('input'));" style="margin-left: 10px; padding: 4px 8px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Insert</button>
1839
  </div>
1840
  <div style="display: flex; align-items: center; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 8px;">
1841
- <span style="flex: 1;"><strong>Scientific:</strong> "The electron orbits the nucleus"</span>
1842
- <button onclick="document.querySelector('textarea').value = 'The electron orbits the nucleus while the magnetic field flows through the crystal lattice structure.'; document.querySelector('textarea').dispatchEvent(new Event('input'));" style="margin-left: 10px; padding: 4px 8px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Insert</button>
1843
  </div>
1844
  <div style="display: flex; align-items: center; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 8px;">
1845
- <span style="flex: 1;"><strong>Everyday:</strong> "The book sits between keyboard and monitor"</span>
1846
- <button onclick="document.querySelector('textarea').value = 'The ball lies left of the table next to the computer, while the book sits between the keyboard and the monitor.'; document.querySelector('textarea').dispatchEvent(new Event('input'));" style="margin-left: 10px; padding: 4px 8px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Insert</button>
1847
  </div>
1848
  </div>
1849
  </div>
@@ -1893,28 +1916,6 @@ def create_beautiful_interface():
1893
  outputs=[output_summary, curvature_plot, entity_3d_plot, detailed_output]
1894
  )
1895
 
1896
- # Enhanced examples with cutting-edge domains
1897
- gr.Examples(
1898
- examples=[
1899
- ["Dock the kinase inhibitor with the phenyl ring parallel to the hinge backbone.", True, True, 256],
1900
- ["Embed the fluxonium qubit 5 nm above the ground plane, aligned to the Φ = 0.5 Φ₀ sweet spot.", True, True, 256],
1901
- ["Arrange four THF molecules tetrahedrally around Li⁺, 2.1 Å Li–O distance.", True, True, 256],
1902
- ["Stack perovskite unit cells along ⟨110⟩ with 2 nm inter-layer gap.", True, True, 256],
1903
- ["Orient the Pt(111) terrace so CO binds atop, 1.8 Å Pt–C bond length.", True, True, 256],
1904
- ["Weave carbon nanotubes into a 3D lattice with 60° torsion for negative Poisson ratio.", True, True, 256],
1905
- ["Shape the magnetic flux surface into a D-shaped cross-section, R = 3.5 m, a = 1.2 m.", True, True, 256],
1906
- ["Pack the α-helix against the β-sheet at a 35° inter-domain angle.", True, True, 256],
1907
- ["Place the SQUID loop 10 μm above the Nb stripline, aligned to the magnetic bias line.", True, True, 256],
1908
- ["Segregate the fullerene domains 5 nm from the polymer backbone in vertical columns.", True, True, 256],
1909
- ["Define the SN2 trajectory along the C–O bond axis, 180° inversion angle.", True, True, 256],
1910
- ["Embed Si nanowires in a zig-zag pattern with 20 nm pitch to scatter phonons.", True, True, 256],
1911
- ["Place the aluminum bracket flush against the jig, 5 cm left of the drill bit.", True, True, 256],
1912
- ["Shift the electronics pallet three bays toward aisle C, top tier only.", True, True, 256],
1913
- ["Float the navy couch 30 cm from the bay window, facing the TV.", True, True, 256]
1914
- ],
1915
- inputs=[text_input, enable_geometry, show_visualization, max_length],
1916
- label="🧬 Click to try cutting-edge domain examples"
1917
- )
1918
 
1919
  # Simple footer CTA for robotics/simulation pipeline
1920
  gr.HTML("""
 
1805
  variant="primary",
1806
  size="lg"
1807
  )
1808
+
1809
+ # Enhanced examples with cutting-edge domains
1810
+ gr.Examples(
1811
+ examples=[
1812
+ ["Dock the kinase inhibitor with the phenyl ring parallel to the hinge backbone.", True, True, 256],
1813
+ ["Embed the fluxonium qubit 5 nm above the ground plane, aligned to the Φ = 0.5 Φ₀ sweet spot.", True, True, 256],
1814
+ ["Arrange four THF molecules tetrahedrally around Li⁺, 2.1 Å Li–O distance.", True, True, 256],
1815
+ ["Stack perovskite unit cells along ⟨110⟩ with 2 nm inter-layer gap.", True, True, 256],
1816
+ ["Orient the Pt(111) terrace so CO binds atop, 1.8 Å Pt–C bond length.", True, True, 256],
1817
+ ["Weave carbon nanotubes into a 3D lattice with 60° torsion for negative Poisson ratio.", True, True, 256],
1818
+ ["Shape the magnetic flux surface into a D-shaped cross-section, R = 3.5 m, a = 1.2 m.", True, True, 256],
1819
+ ["Pack the α-helix against the β-sheet at a 35° inter-domain angle.", True, True, 256],
1820
+ ["Place the SQUID loop 10 μm above the Nb stripline, aligned to the magnetic bias line.", True, True, 256],
1821
+ ["Segregate the fullerene domains 5 nm from the polymer backbone in vertical columns.", True, True, 256],
1822
+ ["Define the SN2 trajectory along the C–O bond axis, 180° inversion angle.", True, True, 256],
1823
+ ["Embed Si nanowires in a zig-zag pattern with 20 nm pitch to scatter phonons.", True, True, 256],
1824
+ ["Place the aluminum bracket flush against the jig, 5 cm left of the drill bit.", True, True, 256],
1825
+ ["Shift the electronics pallet three bays toward aisle C, top tier only.", True, True, 256],
1826
+ ["Float the navy couch 30 cm from the bay window, facing the TV.", True, True, 256]
1827
+ ],
1828
+ inputs=[text_input, enable_geometry, show_visualization, max_length],
1829
+ label="🧬 Click to try cutting-edge domain examples"
1830
+ )
1831
 
1832
  with gr.Column(scale=1):
1833
  gr.HTML("""
 
1854
  </div>
1855
 
1856
  <div style="margin-top: 20px; padding: 15px; background: rgba(102, 126, 234, 0.1); border-radius: 10px;">
1857
+ <h4 style="color: #667eea; margin: 0 0 10px 0;">🧬 Domain Examples:</h4>
1858
  <div style="font-size: 0.9em; color: #555;">
1859
  <div style="display: flex; align-items: center; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 8px;">
1860
+ <span style="flex: 1;"><strong>Drug Design:</strong> "Dock the kinase inhibitor..."</span>
1861
+ <button onclick="document.querySelector('textarea').value = 'Dock the kinase inhibitor with the phenyl ring parallel to the hinge backbone.'; document.querySelector('textarea').dispatchEvent(new Event('input'));" style="margin-left: 10px; padding: 4px 8px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Insert</button>
1862
  </div>
1863
  <div style="display: flex; align-items: center; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 8px;">
1864
+ <span style="flex: 1;"><strong>Quantum:</strong> "Embed the fluxonium qubit..."</span>
1865
+ <button onclick="document.querySelector('textarea').value = 'Embed the fluxonium qubit 5 nm above the ground plane, aligned to the Φ = 0.5 Φ₀ sweet spot.'; document.querySelector('textarea').dispatchEvent(new Event('input'));" style="margin-left: 10px; padding: 4px 8px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Insert</button>
1866
  </div>
1867
  <div style="display: flex; align-items: center; margin: 8px 0; padding: 8px; background: rgba(255,255,255,0.7); border-radius: 8px;">
1868
+ <span style="flex: 1;"><strong>Manufacturing:</strong> "Place the aluminum bracket..."</span>
1869
+ <button onclick="document.querySelector('textarea').value = 'Place the aluminum bracket flush against the jig, 5 cm left of the drill bit.'; document.querySelector('textarea').dispatchEvent(new Event('input'));" style="margin-left: 10px; padding: 4px 8px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px;">Insert</button>
1870
  </div>
1871
  </div>
1872
  </div>
 
1916
  outputs=[output_summary, curvature_plot, entity_3d_plot, detailed_output]
1917
  )
1918
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1919
 
1920
  # Simple footer CTA for robotics/simulation pipeline
1921
  gr.HTML("""