Hugging Face's logo

Spaces:
chandrakiran06
/
rosdiff
Paused

App Files Community
rosdiff / api /static /app /index.html
Chandrakiran-08
Deploy to HF Spaces
8501103
Raw History Blame Contribute Delete
10.2 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RosDiff by Orcanion</title>
<meta name="description" content="Describe a robot world or a ROS 2 package; RosDiff builds it and tests it.">
<link rel="icon" type="image/png" sizes="32x32" href="/static/app/brand/rosdiff-32.png">
<link rel="apple-touch-icon" href="/static/app/brand/rosdiff-192.png">
<meta name="theme-color" content="#050507">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/app/app.css">
</head>
<body>
<!-- Startup animation (shortened for returning visitors; click or any key skips) -->
<div id="splash" class="splash" aria-hidden="true">
<div class="splash-inner">
<img class="splash-logo" src="/static/app/brand/rosdiff-512.webp" alt="" width="200" height="200">
<div class="splash-name">RosDiff</div>
<div class="splash-by">by Orcanion</div>
</div>
</div>
<!-- Sign in -->
<div id="login" class="login" hidden>
<form class="login-card" id="login-form" autocomplete="off">
<img class="login-logo" src="/static/app/brand/rosdiff-192.png" alt="RosDiff logo" width="84" height="84">
<div class="login-brand">RosDiff <span>by Orcanion</span></div>
<h1>Tell RosDiff what you want to build</h1>
<p class="muted">It picks the AI, the simulator and the compute, then builds and tests it for you.</p>
<p class="muted small">Enter the key you were given.</p>
<label class="sr-only" for="key-input">Tester key</label>
<input id="key-input" class="input" type="password" placeholder="Your API key" spellcheck="false" required>
<button class="btn btn-primary btn-block" type="submit">Sign in</button>
<p id="login-error" class="error-text" role="alert" hidden></p>
<p class="muted small">No key yet? Ask your Orcanion contact.</p>
</form>
</div>
<!-- App -->
<div id="app" class="app" hidden>
<header class="topbar">
<button class="icon-btn only-mobile" id="menu-btn" aria-label="Show history" aria-expanded="false">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
</button>
<div class="brand"><img class="logo-img" src="/static/app/brand/rosdiff-64.png" alt="" width="28" height="28"><span>RosDiff</span><span class="by">by Orcanion</span><span class="tag">testing</span></div>
<div class="topbar-right">
<button class="budget" id="budget" type="button" title="Your AI budget. Click for details.">
<span class="budget-label" id="budget-label">—</span>
<span class="budget-bar"><span id="budget-fill"></span></span>
</button>
<div class="user">
<button class="user-chip" id="user-btn" aria-haspopup="menu" aria-expanded="false">
<span class="avatar" id="avatar" aria-hidden="true">?</span><span id="user-name">tester</span>
</button>
<div class="menu" id="user-menu" role="menu" hidden>
<button role="menuitem" id="usage-btn">My usage</button>
<button role="menuitem" id="help-btn">Take the tour</button>
<button role="menuitem" id="logout-btn">Sign out</button>
</div>
</div>
</div>
</header>
<aside class="sidebar" id="sidebar" aria-label="History">
<nav class="sidebar-nav" aria-label="Workspace">
<button class="s-nav-btn mtab active" data-pane="sim">
<span class="s-icon sim-icon"><svg viewBox="0 0 24 24"><path d="M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Zm0 0v18M4 7.5l8 4.5 8-4.5"/></svg></span>
Simulation
</button>
<button class="s-nav-btn mtab" data-pane="code">
<span class="s-icon code-icon"><svg viewBox="0 0 24 24"><path d="m8 7-5 5 5 5m8-10 5 5-5 5M14 4l-4 16"/></svg></span>
Code
</button>
</nav>
<div class="sidebar-tools">
<span class="section-title">Available Tools</span>
<div class="tools-list">
<span class="tool-chip mujoco">MuJoCo</span>
<span class="tool-chip isaac">Isaac Sim</span>
<span class="tool-chip ros">ROS 2</span>
</div>
</div>
<div class="sidebar-head">
<span class="section-title">History</span>
<button class="icon-btn" id="refresh-history" aria-label="Refresh history" title="Refresh">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0-2.3 5.7M20 5v6h-6"/></svg>
</button>
</div>
<div class="history" id="history" role="list"></div>
</aside>
<div class="scrim" id="scrim" hidden></div>
<main class="workspace">
<!-- Simulation pane -->
<section class="pane active" id="pane-sim" aria-labelledby="sim-title">
<div class="pane-head">
<span class="pane-icon sim" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3 4 7.5v9L12 21l8-4.5v-9L12 3Zm0 0v18M4 7.5l8 4.5 8-4.5"/></svg></span>
<div>
<h2 id="sim-title">Simulation</h2>
<p class="muted small">Describe a world. RosDiff picks the simulator, builds it and tests it.</p>
</div>
<button class="btn btn-ghost btn-sm" data-clear="sim" aria-label="Start a new simulation thread">New</button>
</div>
<div class="thread" id="thread-sim" aria-live="polite"></div>
<form class="composer" id="composer-sim">
<div class="chips" role="radiogroup" aria-label="Robot" id="robot-chips"></div>
<div class="composer-box">
<label class="sr-only" for="input-sim">Describe the scene</label>
<textarea id="input-sim" rows="2" placeholder="e.g. The robot stands in front of three steps, 15 cm high, one metre ahead…"></textarea>
<button class="send" type="submit" aria-label="Build scene" title="Build scene (Enter)">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
</div>
</form>
</section>
<!-- Code pane -->
<section class="pane" id="pane-code" aria-labelledby="code-title">
<div class="pane-head">
<span class="pane-icon code" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="m8 7-5 5 5 5m8-10 5 5-5 5M14 4l-4 16"/></svg></span>
<div>
<h2 id="code-title">ROS 2 code</h2>
<p class="muted small">Describe a node. RosDiff writes it, then builds and runs it for real.</p>
</div>
<button class="btn btn-ghost btn-sm" data-clear="code" aria-label="Start a new code thread">New</button>
</div>
<div class="thread" id="thread-code" aria-live="polite"></div>
<form class="composer" id="composer-code">
<div class="chips">
<div class="seg" role="radiogroup" aria-label="ROS 2 version">
<button type="button" class="seg-btn active" data-distro="humble" role="radio" aria-checked="true">Humble</button>
<button type="button" class="seg-btn" data-distro="jazzy" role="radio" aria-checked="false">Jazzy</button>
</div>
<div class="seg" role="radiogroup" aria-label="Language">
<button type="button" class="seg-btn active" data-lang="python" role="radio" aria-checked="true">Python</button>
<button type="button" class="seg-btn" data-lang="cpp" role="radio" aria-checked="false">C++</button>
</div>
</div>
<div class="composer-box">
<label class="sr-only" for="input-code">Describe the ROS 2 package</label>
<textarea id="input-code" rows="2" placeholder="e.g. Stop the robot when the laser sees something closer than 0.5 m…"></textarea>
<button class="send" type="submit" aria-label="Write package" title="Write package (Enter)">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
</button>
</div>
</form>
</section>
</main>
</div>
<!-- Beginner tour -->
<dialog id="tour" class="dialog tour" aria-labelledby="tour-title">
<div class="tour-top">
<img src="/static/app/brand/rosdiff-64.png" alt="" width="30" height="30">
<span class="tour-count" id="tour-count">1 / 10</span>
<button class="icon-btn" id="tour-close" aria-label="Close the tour">
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7l10 10M17 7 7 17"/></svg>
</button>
</div>
<div id="tour-slide" class="tour-slide" aria-live="polite"></div>
<div class="tour-dots" id="tour-dots" aria-hidden="true"></div>
<div class="tour-actions">
<button class="btn btn-ghost" id="tour-back" type="button">Back</button>
<button class="btn btn-primary" id="tour-next" type="button">Next</button>
</div>
</dialog>
<!-- Usage -->
<dialog id="usage" class="dialog" aria-labelledby="usage-title">
<h2 id="usage-title">Your RosDiff usage</h2>
<div id="usage-body"></div>
<form method="dialog"><button class="btn btn-primary">Close</button></form>
</dialog>
<!-- Feedback note -->
<dialog id="fb-dialog" class="dialog" aria-labelledby="fb-title">
<form id="fb-form">
<h2 id="fb-title">Tell us what went wrong or how to improve</h2>
<p class="muted small">Optional, but it helps us a lot.</p>
<label class="sr-only" for="fb-note">Your feedback</label>
<textarea id="fb-note" class="textarea" rows="4" maxlength="4000" placeholder="e.g. The boxes were floating above the floor…"></textarea>
<div class="dialog-actions">
<button class="btn btn-ghost" type="button" id="fb-skip">Skip</button>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</dialog>
<div class="toast" id="toast" role="status" hidden></div>
<script src="/static/app/app.js" type="module"></script>
</body>
</html>