Streamlit 및 HTML: Python 앱에서 하나의 파일까지 공유 가능

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello app</title>
<style>
  body { margin: 0; padding: 20px; font-family: system-ui, sans-serif; background: #fff; color: #262730; }
  label { display: block; font-size: 14px; margin-bottom: 6px; }
  input {
    width: 100%; max-width: 320px; box-sizing: border-box;
    padding: 9px 11px; font: inherit; border: 1px solid #d5d7de; border-radius: 8px; background: #f0f2f6;
  }
  #out { margin-top: 18px; font-size: 18px; }
  .note { margin-top: 18px; font-size: 13px; color: #6b7080; }
</style>
</head>
<body>
<label for="name">Your name</label>
<input id="name" autocomplete="off">
<p id="out"></p>
<p class="note">The same app as three lines of Streamlit, with no Python server.</p>

<script>
  const name = document.getElementById('name');
  const out = document.getElementById('out');

  // Streamlit reruns the script on every change; here render() plays that part
  function render() {
    out.textContent = 'Hello, ' + (name.value.trim() || 'world');
  }

  name.addEventListener('input', render);
  render();  // first run, like opening the app
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rerun and session state</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; color: #262730; background: #fff; }
  .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  @media (max-width: 520px) { .wrap { grid-template-columns: 1fr; } }
  .side { background: #f0f2f6; border-radius: 10px; padding: 14px; }
  label { display: block; font-size: 13px; margin: 0 0 10px; }
  input[type=range] { width: 100%; }
  button { font: inherit; padding: 7px 14px; border: 1px solid #c9ccd4; border-radius: 8px; background: #fff; cursor: pointer; }
  .main p { margin: 0 0 8px; font-size: 15px; }
  .runs { font-size: 13px; color: #6b7080; }
  b.bad { color: #b45309; } b.good { color: #15803d; }
</style>
</head>
<body>
<div class="wrap">
  <div class="side">
    <label>Repeat <span id="nv">3</span> times
      <input type="range" id="n" min="1" max="8" value="3"></label>
    <label><input type="checkbox" id="shout"> Shout</label>
    <button id="add" type="button">Add one</button>
  </div>
  <div class="main">
    <p id="text"></p>
    <p>Counter inside render(): <b class="bad" id="local"></b></p>
    <p>Counter kept outside: <b class="good" id="kept"></b></p>
    <p class="runs">Full reruns so far: <span id="runs"></span></p>
  </div>
</div>

<script>
  const $ = (id) => document.getElementById(id);
  const state = { count: 0 };  // like st.session_state: survives every rerun
  let runs = 0;

  function render(clicked = false) {
    runs++;
    let count = 0;             // like a plain variable in the script: reset each run
    if (clicked) { count++; state.count++; }

    const word = $('shout').checked ? 'HELLO!' : 'hello';
    $('nv').textContent = $('n').value;
    $('text').textContent = Array($('n').valueAsNumber).fill(word).join(' ');
    $('local').textContent = count;
    $('kept').textContent = state.count;
    $('runs').textContent = runs;
  }

  // every widget triggers a full rerun, top to bottom
  $('n').addEventListener('input', () => render());
  $('shout').addEventListener('change', () => render());
  $('add').addEventListener('click', () => render(true));
  render();
</script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sales explorer</title>
<style>
  body { margin: 0; padding: 16px; font-family: system-ui, sans-serif; color: #262730; background: #fff; }
  h1 { font-size: 20px; margin: 0 0 12px; }
  .controls { display: flex; flex-wrap: wrap; gap: 12px 20px; background: #f0f2f6; border-radius: 10px; padding: 12px 14px; }
  .controls label { font-size: 13px; display: grid; gap: 5px; min-width: 150px; }
  select { font: inherit; padding: 6px 8px; border: 1px solid #c9ccd4; border-radius: 7px; background: #fff; }
  .metrics { display: flex; gap: 24px; margin: 14px 0 6px; }
  .metric small { display: block; font-size: 13px; color: #6b7080; }
  .metric b { font-size: 26px; font-weight: 600; }
  svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 6px 0 10px; }
  table { border-collapse: collapse; width: 100%; max-width: 560px; font-size: 14px; }
  th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e6e8ee; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .empty { color: #b45309; font-size: 14px; }
</style>
</head>
<body>
<h1>Sales explorer</h1>
<div class="controls">
  <label>Region
    <select id="region"><option>All</option><option>North</option><option>South</option><option>West</option></select>
  </label>
  <label>Minimum units: <span id="minv">0</span>
    <input type="range" id="min" min="0" max="60" step="5" value="0">
  </label>
</div>

<div class="metrics">
  <div class="metric"><small>Units</small><b id="units"></b></div>
  <div class="metric"><small>Rows</small><b id="rows"></b></div>
</div>
<svg id="chart" viewBox="0 0 560 170" role="img" aria-label="Units by product"></svg>
<table>
  <thead><tr><th>Product</th><th>Region</th><th class="num">Units</th></tr></thead>
  <tbody id="body"></tbody>
</table>

<script>
  // the data a Streamlit app would read with pd.read_csv()
  const data = [
    ['Lamp', 'North', 42], ['Lamp', 'South', 18], ['Desk', 'North', 25],
    ['Desk', 'West', 51], ['Chair', 'South', 33], ['Chair', 'West', 12],
    ['Shelf', 'North', 8], ['Shelf', 'West', 27], ['Rug', 'South', 46]
  ].map(([product, region, units]) => ({ product, region, units }));

  const $ = (id) => document.getElementById(id);

  function render() {
    const region = $('region').value;
    const min = $('min').valueAsNumber;
    $('minv').textContent = min;

    const rows = data.filter((r) => (region === 'All' || r.region === region) && r.units >= min);

    // st.metric
    $('units').textContent = rows.reduce((s, r) => s + r.units, 0);
    $('rows').textContent = rows.length;

    // st.dataframe
    $('body').innerHTML = rows.length
      ? rows.map((r) => `<tr><td>${r.product}</td><td>${r.region}</td><td class="num">${r.units}</td></tr>`).join('')
      : '<tr><td colspan="3" class="empty">No rows match. Lower the minimum.</td></tr>';

    // st.bar_chart: total units per product, drawn as SVG
    const totals = {};
    rows.forEach((r) => { totals[r.product] = (totals[r.product] || 0) + r.units; });
    const names = Object.keys(totals);
    const max = Math.max(1, ...Object.values(totals));
    const w = 560 / Math.max(names.length, 1);
    $('chart').innerHTML = names.map((n, i) => {
      const h = Math.round(totals[n] / max * 115);
      const x = i * w + 8;
      return `<rect x="${x}" y="${140 - h}" width="${w - 16}" height="${h}" rx="4" fill="#ff4b4b"/>` +
             `<text x="${x + (w - 16) / 2}" y="162" font-size="15" text-anchor="middle" fill="#262730">${n}</text>` +
             `<text x="${x + (w - 16) / 2}" y="${134 - h}" font-size="14" text-anchor="middle" fill="#6b7080">${totals[n]}</text>`;
    }).join('');
  }

  // any widget change reruns everything, the Streamlit way
  $('region').addEventListener('change', render);
  $('min').addEventListener('input', render);
  render();
</script>
</body>
</html>