<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>OBELICS Interactive Map</title> <link rel="stylesheet" href="style.css" /> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; padding: 0; color: #333; } .iframe-container { border: 1px solid #ccc; border-radius: 10px; overflow: hidden; width: 80%; height: 80%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } iframe { width: 100%; height: 100%; border: none; } </style> </head> <body> <div class="card"> <h1>OBELICS Interactive Map</h1> <p>This is an embedded interactive visualization of (a subset of) <a href="https://huggingface.co/datasets/HuggingFaceM4/OBELICS">OBELICS</a> powered by <a href="https://home.nomic.ai/">Nomic AI</a>. You will find the original map here</p> <div class="iframe-container"> <iframe src="https://atlas.nomic.ai/map/f2fba2aa-3647-4f49-a0f3-9347daeee499/ee4a84bd-f125-4bcc-a683-1b4e231cb10f" allow="clipboard-read; clipboard-write" title="Nomic Atlas"></iframe> </div> </div> </body> </html>