Spaces:
Sleeping
Sleeping
File size: 6,171 Bytes
85c5933 6a786e6 9befa59 1c4c2e7 9befa59 1c4c2e7 85c5933 a9deb6d 85c5933 a9deb6d 85c5933 a9deb6d 85c5933 0c56308 85c5933 a9deb6d 85c5933 a9deb6d 85c5933 0c56308 85c5933 a9deb6d 85c5933 0c56308 a9deb6d 85c5933 0c56308 85c5933 a9deb6d 85c5933 a9deb6d 85c5933 a9deb6d 85c5933 a9deb6d 85c5933 a9deb6d 8ca57c5 85c5933 a9deb6d 85c5933 a9deb6d 85c5933 a9deb6d 85c5933 9befa59 85c5933 b3e01f2 85c5933 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Borderless - Immigration Research Agent</title>
<link
href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="/assets/server.css" />
<link rel="stylesheet" href="/assets/globe.css" />
</head>
<body>
<div class="app-shell">
<header class="app-header">
<div class="borderless-hero">
<h2>Borderless</h2>
<p class="borderless-hero-description">
Describe your background once. The agent researches official sources, and suggests countries to migrate to.
</p>
</div>
<div class="header-actions">
<button type="button" id="history-open" class="header-button">
History
</button>
<button type="button" id="new-chat" class="header-button">
New chat
</button>
<a id="auth-login" class="header-button" href="/login/huggingface" hidden>
Log in with Hugging Face
</a>
<a id="auth-logout" class="header-button" href="/logout" hidden>
Log out
</a>
</div>
</header>
<main class="borderless-main-workspace">
<section class="borderless-center-panel">
<div class="globe-root globe-column">
<div class="globe-shell is-loading">
<div
class="globe-map"
data-style="https://tiles.openfreemap.org/styles/liberty"
data-center="[0, 20]"
data-zoom="1.5"
data-projection="globe"
></div>
<div class="globe-status globe-loading">Loading the globe...</div>
</div>
</div>
</section>
<section class="borderless-chat-panel">
<div id="form-view" class="side-view is-active">
<form id="intake-form" class="borderless-form-panel" novalidate>
<div class="form-row">
<div class="form-field">
<label for="current-country">Current country</label>
<select id="current-country" required></select>
</div>
<div class="form-field">
<label for="residence-status">Current residence status</label>
<select id="residence-status" required></select>
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="education">Education</label>
<select id="education" required></select>
</div>
<div class="form-field">
<label for="occupation">Occupation</label>
<select id="occupation" required></select>
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="experience">Experience</label>
<select id="experience" required></select>
</div>
<div class="form-field">
<label for="timeline">Target timeline</label>
<select id="timeline" required></select>
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="budget">Budget</label>
<select id="budget" required></select>
</div>
<div class="form-field">
<label for="family">Family / dependents</label>
<select id="family" required></select>
</div>
</div>
<div class="form-field form-goals-field">
<label for="goals">Goals in everyday language</label>
<textarea
id="goals"
required
placeholder="e.g. I want a realistic skilled-worker route, lower risk, and a path to permanent residence."
></textarea>
</div>
<div class="form-footer">
<button type="submit" id="create-prompt" class="primary">
Submit
</button>
<div class="form-examples">
<p class="form-examples-note">Try an example</p>
<div id="persona-list" class="persona-list"></div>
</div>
</div>
</form>
<div id="form-status" class="status-banner"></div>
</div>
<div id="chat-view" class="side-view">
<div id="status-banner" class="status-banner"></div>
<div id="chat-messages" class="chat-messages"></div>
<div class="chat-input-row">
<textarea
id="chat-input"
placeholder="Ask a follow-up question..."
></textarea>
<button type="button" id="chat-send" class="primary">Send</button>
</div>
</div>
</section>
</main>
</div>
<div id="history-dialog" class="history-dialog" hidden>
<div class="history-dialog-backdrop" data-history-close></div>
<div
class="history-dialog-panel"
role="dialog"
aria-modal="true"
aria-labelledby="history-dialog-title"
>
<div class="history-dialog-header">
<h3 id="history-dialog-title">Chat history</h3>
<button
type="button"
id="history-close"
class="history-dialog-close"
aria-label="Close"
>
Close
</button>
</div>
<div id="history-list" class="history-list"></div>
</div>
</div>
<script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
<script type="module" src="/assets/globe.js"></script>
<script type="module" src="/assets/app.js"></script>
</body>
</html>
|