HuggingFaceM4/OBELICS-Interactive-Map

1<!DOCTYPE html>2<html>3	<head>4		<meta charset="utf-8" />5		<title>OBELICS Interactive Map</title>6		<style>7			body {8			  font-family: Arial, sans-serif;9			  background-color: #f0f0f0;10			  display: flex;11              flex-direction: column;  /* This will stack the children vertically */12			  justify-content: center;13			  align-items: center;14			  height: 100vh;15			  margin: 0;16			  padding: 0;17			  color: #333;18			}19			.iframe-container {20			  border: 1px solid #ccc;21			  border-radius: 10px;22			  overflow: hidden;23			  width: 80%;24			  height: 80%;25			  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);26			}27			iframe {28			  width: 100%;29			  height: 100%;30			  border: none;31			}32            body > p {33              width: 80%;34              text-align: center;35              margin-bottom: 20px;  /* Add some space between the paragraph and the iframe container */36            }37		  </style>38	</head>39	<body>40        <p>This is an embedded interactive visualization of (a subset of) <a href="https://huggingface.co/datasets/HuggingFaceM4/OBELICS" target="_blank">OBELICS</a> powered by <a href="https://home.nomic.ai/" target="_blank">Nomic AI</a>. You will find the original map <a href="https://atlas.nomic.ai/map/f2fba2aa-3647-4f49-a0f3-9347daeee499/ee4a84bd-f125-4bcc-a683-1b4e231cb10f" target="_blank">here</a>.</p>41		<div class="iframe-container">42			<iframe src="https://atlas.nomic.ai/map/f2fba2aa-3647-4f49-a0f3-9347daeee499/ee4a84bd-f125-4bcc-a683-1b4e231cb10f" allow="clipboard-read; clipboard-write"43			  title="Nomic Atlas"></iframe>44		</div>45	</body>46</html>