Hugging Face's logo

Spaces:
emnaRa
/
dronesync-flowmaster
Running

App Files Community
emnaRa commited on
Commit
1e368b1
·
verified ·
1 Parent(s): 2ae3c95

<!doctype html>

Browse files

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Resource Allocator Agent — Interactive Demo</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-sA+e2r5kT8b3d2G+g4VQxqv3X2v3p0j1Kp3pVx0g7Dk=" crossorigin=""/>
<style>
:root{--bg:#0f1724;--card:#0b1220;--accent:#7c3aed;--muted:#93c5fd}
body{font-family:Inter,Segoe UI,system-ui,Arial;margin:0;background:linear-gradient(180deg,#041726 0%, #071029 100%);color:#e6eef8}
header{padding:18px 24px;border-bottom:1px solid rgba(255,255,255,0.03);display:flex;gap:12px;align-items:center}
h1{font-size:18px;margin:0}
.container{display:grid;grid-template-columns:360px 1fr 420px;gap:16px;padding:18px}
.card{background:rgba(255,255,255,0.03);border-radius:12px;padding:14px;box-shadow:0 6px 18px rgba(2,6,23,0.6)}
#map{height:640px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.small{font-size:13px;color:rgba(230,238,248,0.7)}
pre{background:#021827;padding:12px;border-radius:8px;overflow:auto;color:#c9f3ff}
button{background:var(--accent);border:0;padding:8px 12px;color:white;border-radius:8px;cursor:pointer}
.row{display:flex;gap:8px;align-items:center}
table{width:100%;border-collapse:collapse;margin-top:8px}
th,td{padding:6px;border-bottom:1px dashed rgba(255,255,255,0.03);text-align:left;font-size:13px}
.muted{color:rgba(230,238,248,0.55);font-size:13px}
.green{color:#7ef3a1}
.red{color:#ff8b8b}
.code-block{font-family: monospace;background:#00121a;padding:10px;border-radius:8px}
footer{padding:12px 20px;color:rgba(230,238,248,0.6)}
</style>
</head>
<body>
<header>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36'><rect rx='6' width='36' height='36' fill='%237c3aed'/><text x='18' y='22' font-size='16' font-family='Arial' fill='white' text-anchor='middle'>RAA</text></svg>" alt="logo" style="width:40px;height:40px;border-radius:8px;"/>
<div>
<h1>Resource Allocator Agent — Interactive Demo</h1>
<div class="muted">CBBA explained • Battery calculus • Map visualization • Export JSON</div>
</div>
</header>

<div class="container">
<!-- LEFT: Controls & Explanation -->
<div class="card">
<h3>Scenario Controls</h3>
<p class="small">Use the controls to run a compact simulation of CBBA + mission feasibility. The demo uses a simplified but realistic battery model and a step-by-step CBBA round trace.</p>

<div style="margin-top:10px">
<label class="small">Simulation seed:</label>
<input id="seed" value="42" style="width:100%;padding:8px;margin-top:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit"/>
</div>

<div style="margin-top:12px" class="row">
<button id="runBtn">Run CBBA</button>
<button id="resetBtn" style="background:#334155">Reset</button>
<button id="exportBtn" style="background:#0ea5a4">Export JSON</button>
</div>

<hr style="border:none;border-top:1px solid rgba(255,255,255,0.03);margin:12px 0" />

<h4>Quick Theory</h4>
<p class="small">CBBA (Consensus-Based Bundle Algorithm) lets multiple agents bid on tasks and converge to a conflict-free allocation by exchanging their best bids and winners across rounds. This demo simulates bids, a tie-breaker, and a final consensus story.</p>

<h4 style="margin-top:10px">Battery model (simplified)</h4>
<p class="small">Phase-based: travel + operation + fixed reserve, scaled by cruise/climb/hover multipliers and safety margin. Battery% = (travel*mult + op*mult + fixed) * base_rate * (1 + safety_margin)</p>

<h4 style="margin-top:10px">How bids are built</h4>
<ul class="small">
<li>Base: inverse distance (closer = higher)</li>
<li>Battery margin bonus</li>
<li>Mission priority multiplier</li>
</ul>

<hr style="border:none;border-top:1px solid rgba(255,255,255,0.03);margin:12px 0" />

<div>
<h4>Data (editable)</h4>
<div class="small">Three drones + one pipeline mission (linestring). Coordinates inspired from your run.</div>
<pre id="dataBlock" class="code-block">{
"drones": [
{"id":"abfe9898","name":"DRONE1_ALPHA","lat":36.894535,"lon":10.186134,"battery":92,"speed":15,"max_time_min":25},
{"id":"f365b4de","name":"DRONE2_BETA","lat":36.895961,"lon":10.176914,"battery":87,"speed":16,"max_time_min":32},
{"id":"fa0100ca","name":"DRONE3_GAMMA","lat":48.645299,"lon":2.368454,"battery":65,"speed":14,"max_time_min":32}
],
"missions": [
{"id":"mission_1","name":"Pipeline","type":"linestring","coords":[[36.9042474,10.1856344],[36.9037965,10.1860012],[36.9031745,10.1865028]],"priority":1,"op_time_min":10}
]
}</pre>
</div>

</div>

<!-- CENTER: Map -->
<div class="card">
<h3>Map View</h3>
<div id="map"></div>
<div style="margin-top:8px" class="small muted">Markers: drones (blue) • Mission path (orange). Click markers to view drone stats.</div>
</div>

<!-- RIGHT: Logs & Results -->
<div class="card">
<h3>CBBA Trace & Results</h3>
<div id="traceArea">
<div class="small muted">Round log</div>
<pre id="traceLog" class="code-block" style="height:220px">(no run yet)</pre>
</div>

<h4 style="margin-top:8px">Bids Table</h4>
<table id="bidsTable"><thead><tr><th>Drone</th><th>Initial Bid</th><th>Final Bid</th></tr></thead><tbody></tbody></table>

<h4 style="margin-top:8px">Final JSON</h4>
<pre id="jsonOut" style="height:220px">(no run yet)</pre>
</div>
</div>

<footer>
Built for demonstration: interactive, educational, and ready to expand. Use it to teach CBBA and battery calculus.
</footer>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-o9N1j8w6bM2T1vKxH2g1g1s7hW0D3s5u6d3xQ1g9Y+M=" crossorigin=""></script>
<script>
// -------------------------------
// Simple utilities: haversine, clamp
// -------------------------------
function toRad(deg){return deg*Math.PI/180}
function haversineKm(lat1,lon1,lat2,lon2){
const R=6371;const dLat=toRad(lat2-lat1);const dLon=toRad(lon2-lon1);
const a=Math.sin(dLat/2)**2 + Math.cos(toRad(lat1))*Math.cos(toRad(lat2))*Math.sin(dLon/2)**2;
return 2*R*Math.asin(Math.sqrt(a));
}
function clamp(v,a,b){return Math.max(a,Math.min(b,v));}

// -------------------------------
// Battery estimator (simplified, transparent)
// -------------------------------
function estimateBattery(travelMin, opMin, drone){
// base_rate: percent per max_time_min (simple linear model)
const base_rate = 100.0 / drone.max_time_min; // % per minute if cruising all-out
const cruise_mult = 1.0; const hover_mult = 1.5; const fixed_reserve = 5.0;
const safety_margin = 0.1; // 10% safety
const travel_pct = travelMin * cruise_mult * base_rate;
const op_pct = opMin * hover_mult * base_rate;
const total = (travel_pct + op_pct + fixed_reserve) * (1 + safety_margin);
return {pct: total, travel_pct, op_pct, feasible: total <= drone.battery};
}

// -------------------------------
// Simple bid function
// -------------------------------
function computeBid(drone, mission, travelKm, batteryEst){
// closeness score
const invDist = 1 / (1 + travelKm);
const batteryMargin = clamp((drone.battery - batteryEst.pct)/100, -1, 1);
const priority = mission.priority || 1;
// final bid composition: weight distance, battery margin, priority
const bid = (invDist * 6.0) + (batteryMargin * 2.0) + (priority * 0.5);
return {bid, invDist, batteryMargin};
}

// -------------------------------
// Simple CBBA simulation
// -------------------------------
async function runCBBA(data){
const drones = data.drones.slice();
const mission = data.missions[0];

const bids = drones.map(d=>({id:d.id,name:d.name,initial:null,final:null,trace:[]}));
const rounds = [];

// compute initial bids
for(let i=0;i<drones.length;i++){
const d=drones[i];
// distance from drone to first vertex
const km = haversineKm(d.lat,d.lon,mission.coords[0][0],mission.coords[0][1]);
const travelMin = (km*1000)/ (d.speed) / 60 * 2; // round-trip travel minutes approx
const batteryEst = estimateBattery(travelMin, mission.op_time_min, d);
const b = computeBid(d, mission, km, batteryEst);
bids[i].initial = b.bid;
bids[i].trace.push({round:0,bid:b.bid});
}

rounds.push({round:0,bids:bids.map(x=>({id:x.id,bid:x.initial}))});

// iterative rounds (simulate penalty/tuning until stable or max rounds)
let converged=false;let maxRounds=10;let r=1;
while(!converged && r<maxRounds){
// simple simulated update: reduce bids slightly for far ones to simulate bundle effects
for(let i=0;i<drones.length;i++){
const d=bids[i];
// apply small random walk influenced by battery margin
const margin = clamp((data.drones[i].battery - 50)/100, -0.2, 0.5);
const delta = (Math.random()-0.5)*0.1 + (-0.05 + margin*0.02);
const newBid = Math.max(0, (d.trace[d.trace.length-1].bid + delta));
d.trace.push({round:r,bid:newBid});
}
rounds.push({round:r,bids:bids.map(x=>({id:x.id,bid:x.trace[x.trace.length-1].bid}))});
// check for convergence heuristic: top bidder unchanged for 3 rounds
const topNow = bids.map(b=>b.trace[b.trace.length-1].bid).reduce((acc,curr,idx,arr)=>{
// find index of max
return arr.indexOf(Math.max(...arr));
},0);
if(r>=3){
const topHistory = rounds.slice(-3).map(rr=>{
const arr=rr.bids.map(b=>b.bid);
return arr.indexOf(Math.max(...arr));
});
if(topHistory.every(x=>x===topHistory[0]))

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +2 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Dronesync Flowmaster
3
- emoji: 📊
4
- colorFrom: red
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: DroneSync FlowMaster 🚁✨
3
+ colorFrom: gray
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
index.html CHANGED
@@ -1,19 +1,2 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
1
+
2
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>