Hugging Face's logo

Spaces:
jfang
/
Mars-ViT-demo
Running

App Files Community
jichao commited on
Commit
3cf9346
·
1 Parent(s): 64d4f77

scroll in safari

Browse files
Files changed (5) hide show
  1. frontend/index.html +14 -1
  2. frontend/public/index.html +14 -1
  3. frontend/src/App.jsx +16 -2
  4. frontend/src/components/EmbeddingViz.jsx +6 -2
  5. frontend/src/components/RetrievalDemo.jsx +6 -2
frontend/index.html CHANGED
@@ -4,9 +4,22 @@
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>Retrieval Demo</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
  <body>
9
  <div id="root"></div>
10
  <script type="module" src="/src/index.jsx"></script>
11
  </body>
12
- </html>
 
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
  <title>Retrieval Demo</title>
7
+ <style>
8
+ html, body {
9
+ height: 100%;
10
+ margin: 0;
11
+ padding: 0;
12
+ overflow-y: auto;
13
+ -webkit-overflow-scrolling: touch;
14
+ }
15
+ #root {
16
+ min-height: 100%;
17
+ position: relative;
18
+ }
19
+ </style>
20
  </head>
21
  <body>
22
  <div id="root"></div>
23
  <script type="module" src="/src/index.jsx"></script>
24
  </body>
25
+ </html>
frontend/public/index.html CHANGED
@@ -4,8 +4,21 @@
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Embedding Visualizer</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  </head>
8
  <body>
9
  <div id="root"></div>
10
  </body>
11
- </html>
 
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
  <title>Embedding Visualizer</title>
7
+ <style>
8
+ html, body {
9
+ height: 100%;
10
+ margin: 0;
11
+ padding: 0;
12
+ overflow-y: auto;
13
+ -webkit-overflow-scrolling: touch;
14
+ }
15
+ #root {
16
+ min-height: 100%;
17
+ position: relative;
18
+ }
19
+ </style>
20
  </head>
21
  <body>
22
  <div id="root"></div>
23
  </body>
24
+ </html>
frontend/src/App.jsx CHANGED
@@ -67,7 +67,15 @@ function App() {
67
  return (
68
  <ThemeProvider theme={marsTheme}>
69
  <Router>
70
- <Box sx={{ flexGrow: 1, minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
 
 
 
 
 
 
 
 
71
  <AppBar position="static" elevation={0}>
72
  <Container maxWidth="lg">
73
  <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
@@ -82,7 +90,13 @@ function App() {
82
  </Container>
83
  </AppBar>
84
 
85
- <Box component="main" sx={{ flexGrow: 1, bgcolor: 'background.default', py: 4 }}>
 
 
 
 
 
 
86
  <Container maxWidth="lg">
87
  <Routes>
88
  <Route path="/" element={<RetrievalDemo />} />
 
67
  return (
68
  <ThemeProvider theme={marsTheme}>
69
  <Router>
70
+ <Box sx={{
71
+ flexGrow: 1,
72
+ minHeight: '100vh',
73
+ display: 'flex',
74
+ flexDirection: 'column',
75
+ position: 'relative',
76
+ overflow: 'auto',
77
+ WebkitOverflowScrolling: 'touch'
78
+ }}>
79
  <AppBar position="static" elevation={0}>
80
  <Container maxWidth="lg">
81
  <Toolbar disableGutters sx={{ justifyContent: 'space-between' }}>
 
90
  </Container>
91
  </AppBar>
92
 
93
+ <Box component="main" sx={{
94
+ flexGrow: 1,
95
+ bgcolor: 'background.default',
96
+ py: 4,
97
+ overflow: 'auto',
98
+ WebkitOverflowScrolling: 'touch'
99
+ }}>
100
  <Container maxWidth="lg">
101
  <Routes>
102
  <Route path="/" element={<RetrievalDemo />} />
frontend/src/components/EmbeddingViz.jsx CHANGED
@@ -3,7 +3,12 @@ import DataObjectIcon from "@mui/icons-material/DataObject"
3
 
4
  function EmbeddingViz() {
5
  return (
6
- <Box>
 
 
 
 
 
7
  <Typography variant="h4" gutterBottom sx={{ display: "flex", alignItems: "center" }}>
8
  <DataObjectIcon sx={{ mr: 1, fontSize: 40 }} />
9
  Embedding Visualization
@@ -20,4 +25,3 @@ function EmbeddingViz() {
20
  }
21
 
22
  export default EmbeddingViz
23
-
 
3
 
4
  function EmbeddingViz() {
5
  return (
6
+ <Box sx={{
7
+ width: '100%',
8
+ height: '100%',
9
+ overflow: 'auto',
10
+ WebkitOverflowScrolling: 'touch'
11
+ }}>
12
  <Typography variant="h4" gutterBottom sx={{ display: "flex", alignItems: "center" }}>
13
  <DataObjectIcon sx={{ mr: 1, fontSize: 40 }} />
14
  Embedding Visualization
 
25
  }
26
 
27
  export default EmbeddingViz
 
frontend/src/components/RetrievalDemo.jsx CHANGED
@@ -144,7 +144,12 @@ const RetrievalDemo = () => {
144
  }
145
 
146
  return (
147
- <Box>
 
 
 
 
 
148
  <Typography variant="h4" gutterBottom sx={{ display: "flex", alignItems: "center" }}>
149
  <RocketLaunchIcon sx={{ mr: 1, fontSize: 40 }} />
150
  Mars Image Retrieval
@@ -312,4 +317,3 @@ const RetrievalDemo = () => {
312
  }
313
 
314
  export default RetrievalDemo
315
-
 
144
  }
145
 
146
  return (
147
+ <Box sx={{
148
+ width: '100%',
149
+ height: '100%',
150
+ overflow: 'auto',
151
+ WebkitOverflowScrolling: 'touch'
152
+ }}>
153
  <Typography variant="h4" gutterBottom sx={{ display: "flex", alignItems: "center" }}>
154
  <RocketLaunchIcon sx={{ mr: 1, fontSize: 40 }} />
155
  Mars Image Retrieval
 
317
  }
318
 
319
  export default RetrievalDemo