Spaces:
Runtime error
Runtime error
Commit
·
37c6b88
1
Parent(s):
53b2d2f
Add basic wikipage renderer
Browse filesIt's rendering the text, tables but it's not rendering the images yet, because the image links point to an external server, while my system think it's an internal link [that's what I think].
- frontend/src/components/Map.js +44 -7
- main.py +1 -1
frontend/src/components/Map.js
CHANGED
|
@@ -43,6 +43,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
|
|
| 43 |
const [wikiContent, setWikiContent] = useState(null);
|
| 44 |
const [panelSize, setPanelSize] = useState('half');
|
| 45 |
const [wikiWidth, setWikiWidth] = useState(20);
|
|
|
|
| 46 |
const isDragging = useRef(false);
|
| 47 |
const startX = useRef(0);
|
| 48 |
const startWidth = useRef(0);
|
|
@@ -97,15 +98,39 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
|
|
| 97 |
if (data && data.latitude && data.longitude) {
|
| 98 |
setMarkerPosition([data.latitude, data.longitude]);
|
| 99 |
}
|
| 100 |
-
} else {
|
| 101 |
setWikiContent({
|
| 102 |
title: data.title,
|
| 103 |
content: data.content
|
| 104 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 105 |
if (data && data.latitude && data.longitude) {
|
| 106 |
setMarkerPosition([data.latitude, data.longitude]);
|
| 107 |
}
|
| 108 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
| 109 |
} catch (error) {
|
| 110 |
console.error("Error fetching Wikipedia content:", error);
|
| 111 |
}
|
|
@@ -144,12 +169,24 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
|
|
| 144 |
<h2>{wikiContent?.title || 'Search for a location'}</h2>
|
| 145 |
</div>
|
| 146 |
{wikiContent ? (
|
| 147 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 148 |
<p>{wikiContent.content}</p>
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
|
|
|
| 153 |
</div>
|
| 154 |
<div
|
| 155 |
onMouseDown={handleMouseDown}
|
|
@@ -185,7 +222,7 @@ const Map = ( { onMapClick, searchQuery, contentType } ) => {
|
|
| 185 |
<MapContainer
|
| 186 |
center={markerPosition}
|
| 187 |
zoom={2}
|
| 188 |
-
style={{ height: '100%', width: '100%'
|
| 189 |
>
|
| 190 |
<ResizeHandler trigger={wikiWidth} />
|
| 191 |
<TileLayer
|
|
|
|
| 43 |
const [wikiContent, setWikiContent] = useState(null);
|
| 44 |
const [panelSize, setPanelSize] = useState('half');
|
| 45 |
const [wikiWidth, setWikiWidth] = useState(20);
|
| 46 |
+
const [iframeSrc, setIframeSrc] = useState('');
|
| 47 |
const isDragging = useRef(false);
|
| 48 |
const startX = useRef(0);
|
| 49 |
const startWidth = useRef(0);
|
|
|
|
| 98 |
if (data && data.latitude && data.longitude) {
|
| 99 |
setMarkerPosition([data.latitude, data.longitude]);
|
| 100 |
}
|
| 101 |
+
} else if (contentType === 'full') {
|
| 102 |
setWikiContent({
|
| 103 |
title: data.title,
|
| 104 |
content: data.content
|
| 105 |
});
|
| 106 |
+
|
| 107 |
+
const htmlContent = `
|
| 108 |
+
<!DOCTYPE html>
|
| 109 |
+
<html>
|
| 110 |
+
<head>
|
| 111 |
+
<style>
|
| 112 |
+
body { font-family: Arial, sans-serif; padding: 20px; }
|
| 113 |
+
img { max-width: 100%; }
|
| 114 |
+
</style>
|
| 115 |
+
</head>
|
| 116 |
+
<body>
|
| 117 |
+
${data.content}
|
| 118 |
+
</body>
|
| 119 |
+
</html>
|
| 120 |
+
`;
|
| 121 |
+
const blob = new Blob([htmlContent], { type: 'text/html' });
|
| 122 |
+
const blobUrl = URL.createObjectURL(blob);
|
| 123 |
+
setIframeSrc(blobUrl);
|
| 124 |
+
// const dataUrl = 'data:text/html;charset=utf-8,' + encodeURIComponent(htmlContent);
|
| 125 |
+
// setIframeSrc(dataUrl);;
|
| 126 |
if (data && data.latitude && data.longitude) {
|
| 127 |
setMarkerPosition([data.latitude, data.longitude]);
|
| 128 |
}
|
| 129 |
}
|
| 130 |
+
else {
|
| 131 |
+
console.log("Invalid content type:", contentType);
|
| 132 |
+
setWikiContent(null);
|
| 133 |
+
}
|
| 134 |
} catch (error) {
|
| 135 |
console.error("Error fetching Wikipedia content:", error);
|
| 136 |
}
|
|
|
|
| 169 |
<h2>{wikiContent?.title || 'Search for a location'}</h2>
|
| 170 |
</div>
|
| 171 |
{wikiContent ? (
|
| 172 |
+
<div>
|
| 173 |
+
{contentType === 'full' ? (
|
| 174 |
+
<iframe
|
| 175 |
+
src={iframeSrc}
|
| 176 |
+
style={{
|
| 177 |
+
width: '100%',
|
| 178 |
+
height: 'calc(100vh - 100px)',
|
| 179 |
+
border: 'none'
|
| 180 |
+
}}
|
| 181 |
+
title="Wikipedia Page"
|
| 182 |
+
/>
|
| 183 |
+
) : (
|
| 184 |
<p>{wikiContent.content}</p>
|
| 185 |
+
)}
|
| 186 |
+
</div>
|
| 187 |
+
) : (
|
| 188 |
+
<p>Search for a location to see Wikipedia content</p>
|
| 189 |
+
)}
|
| 190 |
</div>
|
| 191 |
<div
|
| 192 |
onMouseDown={handleMouseDown}
|
|
|
|
| 222 |
<MapContainer
|
| 223 |
center={markerPosition}
|
| 224 |
zoom={2}
|
| 225 |
+
style={{ height: '100%', width: '100%' }}
|
| 226 |
>
|
| 227 |
<ResizeHandler trigger={wikiWidth} />
|
| 228 |
<TileLayer
|
main.py
CHANGED
|
@@ -1,6 +1,6 @@
|
|
| 1 |
from fastapi import FastAPI
|
| 2 |
from fastapi.middleware.cors import CORSMiddleware
|
| 3 |
-
from fastapi.responses import JSONResponse
|
| 4 |
# from pydantic import BaseModel
|
| 5 |
import requests
|
| 6 |
from geopy.geocoders import Nominatim
|
|
|
|
| 1 |
from fastapi import FastAPI
|
| 2 |
from fastapi.middleware.cors import CORSMiddleware
|
| 3 |
+
from fastapi.responses import JSONResponse, HTMLResponse
|
| 4 |
# from pydantic import BaseModel
|
| 5 |
import requests
|
| 6 |
from geopy.geocoders import Nominatim
|