designpaca/apps/site/public/work/rfs-cfd/index.html
Yun Chan e09d4efb1c
Some checks failed
ci / build (push) Has been cancelled
feat: strengthen design skill and refresh all showcases
2026-09-12 18:16:33 +09:00

613 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>RFS — 실시간 유체 시뮬레이터 · 데이터센터 열관리 GPU 엔진</title>
<meta
name="description"
content="데이터센터 열관리 RFS의 운전 조건을 살펴보는 2D 축소 표현입니다. 이 페이지의 조작은 제품 성능 수치가 아니라 부하와 급기 변화의 관계를 보여 줍니다."
/>
<meta property="og:title" content="RFS — 실시간 유체 시뮬레이터" />
<meta
property="og:description"
content="설비를 옮기면 유동이 그 자리에서 바뀐다. 데이터센터 열관리를 위한 실시간 GPU 유체 시뮬레이션 엔진."
/>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#0e1114" />
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
/>
<link rel="stylesheet" href="./styles/tokens.css?v=20260912all" />
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230E1114'/%3E%3Cpath d='M4 21c4-6 8 4 12-2s8 3 12-3' stroke='%233E8FB0' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M4 27c4-6 8 4 12-2s8 3 12-3' stroke='%238CC152' stroke-width='2.4' fill='none' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E"
/>
</head>
<body>
<a class="skip-link" href="#main">본문으로 건너뛰기</a>
<header class="site-head">
<div class="wrap head-inner">
<a class="wordmark" href="#top">
<span class="wordmark-mark" aria-hidden="true">
<svg viewBox="0 0 28 20" role="presentation" focusable="false">
<path d="M2 13c3.5-5.5 7-1 10.5-5S21 5 26 3" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<path d="M2 18c3.5-5.5 7-1 10.5-5S21 10 26 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity=".5" />
</svg>
</span>
<span class="wordmark-text">RFS</span>
</a>
<nav class="nav" aria-label="주요 섹션">
<a href="#solver">솔버</a>
<a href="#equipment">장비</a>
<a href="#visualization">시각화</a>
<a href="#adopt">도입</a>
</nav>
<p class="head-meta mono">v0.13.0</p>
</div>
</header>
<main id="main">
<!-- ══════════════════════════════════════════════════════════
1 · 히어로 — 암실. 실제로 도는 열유동이 첫 화면을 덮는다
══════════════════════════════════════════════════════════ -->
<section class="band band-dark hero" id="top" aria-labelledby="heroHeading">
<div class="hero-stage" data-field-shell data-field-state="loading">
<canvas id="thermalField" aria-hidden="true"></canvas>
<!-- WebGL 이 없거나 모션을 줄이는 설정이면 이 렌더가 남는다.
폴백이 아니라 결과물이다 — RFS 실물의 파티클 뷰다 -->
<img
class="hero-fallback"
src="./assets/sph-sideview.webp"
width="691"
height="437"
alt="RFS 실물 파티클 뷰 — 서버랙을 통과한 공기가 데워져 위로 오르는 측면 단면"
/>
<div class="hero-grid" aria-hidden="true"></div>
<!-- 장비 형상. 셰이더가 쓰는 좌표와 같은 값을 CSS 변수로 넘긴다 —
그림과 라벨이 어긋나면 라벨이 거짓말이 된다 -->
<div class="stage-solid stage-rack" aria-hidden="true"></div>
<div class="stage-solid stage-fwu" aria-hidden="true"></div>
<div class="hero-scrim" aria-hidden="true"></div>
<div class="stage-tag stage-tag-fwu" aria-hidden="true"><span>FWU 급기</span></div>
<div class="stage-tag stage-tag-rack" aria-hidden="true"><span>서버랙</span></div>
</div>
<div class="wrap hero-copy">
<h1 id="heroHeading">
메시를 다시 만들지 않는다
</h1>
<p class="hero-lead">
설비를 옮기면 유동이 그 자리에서 바뀐다. 데이터센터 열관리를 위한 실시간 GPU 유체
시뮬레이터.
</p>
<div class="scenario-strip" role="group" aria-label="열유동 조작 장면">
<p class="scenario-label">운전 장면</p>
<button
class="scenario-btn"
type="button"
data-field-preset="baseline"
data-load="70"
data-supply="65"
aria-pressed="true"
>
기준 운전
</button>
<button
class="scenario-btn"
type="button"
data-field-preset="overload"
data-load="95"
data-supply="50"
aria-pressed="false"
>
랙 과부하
</button>
<button
class="scenario-btn"
type="button"
data-field-preset="supply-loss"
data-load="65"
data-supply="25"
aria-pressed="false"
>
급기 저하
</button>
</div>
<div class="hero-controls">
<div class="ctl">
<div class="ctl-head">
<label for="ctlLoad">서버랙 부하</label>
<output class="mono" id="outLoad" for="ctlLoad">70%</output>
</div>
<input type="range" id="ctlLoad" min="0" max="100" step="5" value="70" />
</div>
<div class="ctl">
<div class="ctl-head">
<label for="ctlSupply">FWU 급기량</label>
<output class="mono" id="outSupply" for="ctlSupply">65%</output>
</div>
<input type="range" id="ctlSupply" min="0" max="100" step="5" value="65" />
</div>
</div>
<div class="field-readout" aria-live="polite" aria-atomic="true">
<div class="field-readout-head">
<p class="field-readout-label mono">이 화면에서 보는 변화</p>
<p class="field-readout-state" id="fieldState">냉기와 발열이 맞서는 기준 상태입니다.</p>
</div>
<dl class="field-readout-grid">
<div>
<dt>장면</dt>
<dd id="fieldScene">기준 운전</dd>
</div>
<div>
<dt>먼저 볼 곳</dt>
<dd id="fieldWatch">랙 배면</dd>
</div>
<div>
<dt>다음 조작</dt>
<dd id="fieldAction">부하와 급기를 따로 움직여 비교</dd>
</div>
</dl>
</div>
<p class="hero-note">
이 페이지의 조작 화면은 <strong>2D 축소 표현</strong>입니다. 슬라이더를 움직이거나 화면을
문지르면 유동 변화가 바로 보입니다. RFS 본 제품의 Unity 6.4 기반 3D δ-SPH 사양은 이 데모와
별도로 확인해야 합니다.
</p>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
2 · 문제 — 왜 기존 CFD 로는 안 되는가
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-problem" id="problem" aria-labelledby="problemHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="problemHeading">
해가 나올 즈음에는<br />이미 다른 결정을 내린 뒤다
</h2>
</div>
<div class="split-body">
<p>
범용 CFD 도구는 시뮬레이션 한 건에 수 시간에서 수 일이 걸린다. 랙 한 대를 옮길 때마다
메시를 다시 만들고 처음부터 다시 풀어야 하므로, 운영 중에 답을 얻는 용도로는 쓰이지
않는다. 그래서 현장의 배치 변경은 대개 계산이 아니라 경험으로 결정된다.
</p>
<p>
RFS 는 정확도의 상한을 낮추는 대신 <strong>회신 시간</strong>을 바꾼 도구다.
발열량을 올리고, 급기 밸브를 조이고, 랙을 한 칸 옮기는 조작이 같은 화면 안에서
유동에 반영된다. 검증할 것이 "결과 파일"이 아니라 "지금 보고 있는 장면"이 된다.
</p>
<dl class="contrast">
<div>
<dt>범용 CFD 도구</dt>
<dd>배치를 바꾸면 메시 재생성 → 재계산. 한 건에 수 시간~수 일</dd>
</div>
<div>
<dt>RFS</dt>
<dd>배치·발열·제어 변경이 같은 세션 안에서 유동에 반영된다</dd>
</div>
</dl>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
3 · 솔버 — 암실. 사양을 숨기지 않는다
══════════════════════════════════════════════════════════ -->
<section class="band band-dark section-solver" id="solver" aria-labelledby="solverHeading">
<div class="wrap">
<p class="eyebrow">유체 엔진</p>
<h2 id="solverHeading">GPU Compute Shader 위의 δ-SPH</h2>
<p class="section-lead">
격자를 깔지 않는다. 공기를 입자로 놓고 이웃 입자끼리 밀도·압력·열을 주고받게 한다.
벽이 움직여도 격자를 다시 만들 일이 없다 — 실시간이 가능한 이유가 여기에 있다.
</p>
<ul class="spec-ledger">
<li>
<p class="spec-name">보간 커널</p>
<p class="spec-value">Wendland C2</p>
<p class="spec-note">Poly6·Spiky 혼용을 걷어내고 단일 경로로 통일했다</p>
</li>
<li>
<p class="spec-name">상태방정식</p>
<p class="spec-value">Tait</p>
<p class="spec-note">약압축성 가정. 압력 반복 없이 밀도에서 압력을 직접 얻는다</p>
</li>
<li>
<p class="spec-name">벽면 경계</p>
<p class="spec-value">Adami Ghost Particle</p>
<p class="spec-note">엣지·코너까지 덮는다. 경계에서 입자가 새던 결함을 해소한 방식</p>
</li>
<li>
<p class="spec-name">시간 적분</p>
<p class="spec-value">CFL 적응 서브스텝</p>
<p class="spec-note">유속이 빨라지면 스텝을 자동으로 잘게 쪼갠다</p>
</li>
<li>
<p class="spec-name">배속</p>
<p class="spec-value">0.1× — 10×</p>
<p class="spec-note">배속을 바꿔도 같은 물리 결과가 나오도록 시간 불변을 보장한다</p>
</li>
<li>
<p class="spec-name">열·습도</p>
<p class="spec-value">입자 간 전도 + 부력</p>
<p class="spec-note">습공기 밀도 보정을 포함한다</p>
</li>
<li>
<p class="spec-name">주기 경계</p>
<p class="spec-value">PBC · 최소 이미지 규약</p>
<p class="spec-note">셀 래핑으로 무한 반복 공간을 다룬다</p>
</li>
<li>
<p class="spec-name">이웃 탐색</p>
<p class="spec-value">공간 해시 그리드</p>
<p class="spec-note">SpatialHash 커널 1개가 전담한다</p>
</li>
</ul>
<div class="figures">
<figure>
<p class="fig-num mono">01</p>
<p class="fig-title">GPU 커널</p>
<p class="fig-val mono">Compute</p>
<p class="fig-note">공간 해시와 유동 계산을 GPU 작업으로 나눕니다.</p>
</figure>
<figure>
<p class="fig-num mono">02</p>
<p class="fig-title">연산 모델</p>
<p class="fig-val mono">δ-SPH</p>
<p class="fig-note">운전 조건에 따른 유동 변화를 계산합니다.</p>
</figure>
<figure>
<p class="fig-num mono">03</p>
<p class="fig-title">데이터 배치</p>
<p class="fig-val mono">SoA</p>
<p class="fig-note">계산에 필요한 상태를 분리해 다룹니다.</p>
</figure>
<figure>
<p class="fig-num mono">04</p>
<p class="fig-title">검증 흐름</p>
<p class="fig-val mono">Edit · Play</p>
<p class="fig-note">장면과 운전 조건을 나눠 확인합니다.</p>
</figure>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
4 · 장비 — 라이트. 이 제품이 아는 물건들
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-equipment" id="equipment" aria-labelledby="equipHeading">
<div class="wrap">
<h2 id="equipHeading">전산실에 있는 물건을 그대로 안다</h2>
<p class="section-lead">
유동만 푸는 것으로는 답이 안 나온다. 열을 만드는 것과 식히는 것이 각자의 제어 논리를
가지고 장 안에 들어가 있어야 배치 변경이 의미를 갖는다.
</p>
<div class="equip-list">
<article>
<h3>항온항습기 <span class="tag mono">FWU</span></h3>
<p>
PID 자동 제어로 목표 온도를 좇는다. 열교환은 ε-NTU 로 계산하고,
프리쿨링·쿨링 밸브와 댐퍼 모드를 각각 조작할 수 있다.
</p>
</article>
<article>
<h3>서버랙</h3>
<p>
CFM 기반으로 통과 공기에 열을 싣는다. 동적 전력 프로파일 5종을 갖고 있고,
장애 상황을 만들어 그때 열이 어디로 가는지 볼 수 있다.
</p>
</article>
<article>
<h3>팬 · 댐퍼 · 냉각코일</h3>
<p>
듀얼 원뿔 존 모델로 GPU 파티클 물리에 직접 개입한다.
후처리로 그린 화살표가 아니라 실제로 입자를 민다.
</p>
</article>
<article>
<h3>온도계</h3>
<p>
물리 기반 센서 응답 특성을 갖는다. 값이 즉시 튀지 않고 실제 계기처럼 따라온다.
Cool Zone 과 Hot Zone 을 자동으로 분류한다.
</p>
</article>
<article>
<h3>급기구 · 배기구</h3>
<p>
CFD inlet / outlet 패턴을 따른다. 경계에 걸린 파티클을 자동으로 재배치해
유입·유출이 끊기지 않게 한다.
</p>
</article>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
5 · 시각화 — 암실. 실제 렌더를 그대로 싣는다
══════════════════════════════════════════════════════════ -->
<section class="band band-dark section-vis" id="visualization" aria-labelledby="visHeading">
<div class="wrap">
<p class="eyebrow">보이는 방식</p>
<h2 id="visHeading">읽는 방법을 네 가지로 나눈다</h2>
<div class="vis-layout">
<ol class="vis-list">
<li>
<h3>파티클</h3>
<p>온도로 색을 매핑하고 발광과 LOD 를 건다. 공기가 어디서 데워지는지 그대로 보인다.</p>
</li>
<li>
<h3>트레일</h3>
<p>Ring Buffer 로 궤적을 남긴다. 한 순간이 아니라 지나온 경로를 본다.</p>
</li>
<li>
<h3>히트맵 슬라이스</h3>
<p>
온도·속도·압력·밀도·습도 다섯 물리량의 단면을 5패스 GPU 파이프라인으로 그린다.
<span class="mono">X</span> · <span class="mono">Y</span> ·
<span class="mono">Z</span> 키로 축을 바꾼다.
</p>
</li>
<li>
<h3>벡터 필드</h3>
<p>화살표 글리프와 스트림라인을 GPU 인스턴싱으로 띄운다. 방향과 세기를 함께 읽는다.</p>
</li>
</ol>
<div class="vis-shots">
<div class="vis-toolbar">
<div class="vis-tabs" role="group" aria-label="RFS 실물 파티클 뷰 선택">
<button class="vis-tab" type="button" data-vis-target="top" aria-pressed="true">상면</button>
<button class="vis-tab" type="button" data-vis-target="side" aria-pressed="false">측면</button>
</div>
<p class="vis-source mono">RFS 실물 렌더</p>
</div>
<div class="vis-frame">
<figure data-vis-panel="top">
<img
src="./assets/sph-topview.webp"
width="689"
height="680"
loading="lazy"
decoding="async"
alt="RFS 상면 뷰 — 랙 상부에서 데워진 입자가 초록으로 퍼지고 주변 저온 입자는 청록으로 남는다"
/>
<figcaption>상면 · 랙 상부의 열기둥</figcaption>
</figure>
<figure data-vis-panel="side" hidden>
<img
src="./assets/sph-sideview.webp"
width="691"
height="437"
loading="lazy"
decoding="async"
alt="RFS 측면 뷰 — 랙을 통과하며 데워진 공기가 오른쪽으로 밀려 나가는 단면"
/>
<figcaption>측면 · 랙을 통과한 공기</figcaption>
</figure>
</div>
<div class="temp-key" role="list" aria-label="파티클 온도 색상 범례">
<span role="listitem"><i class="temp-cold" aria-hidden="true"></i>저온</span>
<span role="listitem"><i class="temp-mid" aria-hidden="true"></i>중간</span>
<span role="listitem"><i class="temp-hot" aria-hidden="true"></i>고온</span>
</div>
<p class="shots-note">
두 장 모두 RFS 실물의 파티클 뷰다. 저온이 청록, 고온이 초록이다 —
이 페이지 첫 화면의 색도 같은 규칙을 쓴다.
</p>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
6 · 에디터 — 라이트
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-editor" id="editor" aria-labelledby="editorHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="editorHeading">시뮬레이터가 아니라 작업 환경이다</h2>
<p class="section-lead">
배치를 바꿔 보려면 배치를 바꿀 수 있어야 한다. RFS Editor 는 Unity UI Toolkit 으로 만든
런타임 편집 환경이고, 시뮬레이션이 도는 채로 물건을 옮긴다.
</p>
</div>
<div class="split-body">
<dl class="feature-rows">
<div>
<dt>오브젝트 편집</dt>
<dd>이동·회전·스케일 핸들, 다중 선택, Undo / Redo, 드래그 앤 드롭 배치</dd>
</div>
<div>
<dt>속성 패널</dt>
<dd>실시간 속성 편집. 관제 시스템의 XD 태그를 여기서 바인딩한다</dd>
</div>
<div>
<dt>리플레이</dt>
<dd>
CSV 또는 XD API 를 데이터소스로 삼아 시계열을 재생하고, 실측 대비 정확도 리포트를
만든다
</dd>
</div>
<div>
<dt>AI Advisor</dt>
<dd>
26개 규칙의 Rule Engine 과 LLM 프로바이더 4종(Anthropic · OpenAI · Gemini ·
로컬 Ollama) 연동
</dd>
</div>
<div>
<dt>모니터링</dt>
<dd>PUE · COP · 전력 · CO₂ 대시보드, MetricsHUD 7섹션 26메트릭</dd>
</div>
<div>
<dt>프로젝트</dt>
<dd>생성·저장·불러오기, 다중 씬, glTF / GLB 3D 모델 임포트</dd>
</div>
</dl>
<div class="keys">
<p class="keys-title">손에 익는 키</p>
<ul>
<li><kbd>Space</kbd> 일시정지 · 재개</li>
<li><kbd>H</kbd> 히트맵</li>
<li><kbd>X</kbd><kbd>Y</kbd><kbd>Z</kbd> 슬라이스 축</li>
<li><kbd>F3</kbd> 성능 통계</li>
<li><kbd>Tab</kbd> UI 접기</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
7 · 아키텍처 — 라이트. 5계층
══════════════════════════════════════════════════════════ -->
<section class="band band-dark section-arch" id="architecture" aria-labelledby="archHeading">
<div class="wrap">
<h2 id="archHeading">다섯 켜</h2>
<ol class="layers">
<li>
<p class="layer-id mono">L1</p>
<p class="layer-name">애플리케이션</p>
<p class="layer-body">RFS Editor · Simulation3D · AI Advisor · 리플레이</p>
</li>
<li>
<p class="layer-id mono">L2</p>
<p class="layer-name">파이프라인 · 컨트롤러</p>
<p class="layer-body">SimulationPipeline → 스테이지 10개 → 컨트롤러 26개</p>
</li>
<li>
<p class="layer-id mono">L3</p>
<p class="layer-name">GPU 컴퓨트</p>
<p class="layer-body">
SPHCore 8 · DomainExt 14 · SpatialHash 1 · TempGrid 8 · ObjectGrid 7 ·
Integration 5 · Scatter 4 · Trail 2 · GlobalSDF 3 · Coil 1
</p>
</li>
<li>
<p class="layer-id mono">L4</p>
<p class="layer-name">데이터 버퍼</p>
<p class="layer-body">SoA 버퍼 6개 · ParticleData 20B · 충돌 메시 데이터</p>
</li>
<li>
<p class="layer-id mono">L5</p>
<p class="layer-name">외부 통신</p>
<p class="layer-body">Socket.IO v2 (RFS-XD 관제 연동) · REST API · CSV 내보내기</p>
</li>
</ol>
</div>
</section>
<!-- ══════════════════════════════════════════════════════════
8 · 도입 — 라이트. 요구사양과 연락
══════════════════════════════════════════════════════════ -->
<section class="band band-light section-adopt" id="adopt" aria-labelledby="adoptHeading">
<div class="wrap split">
<div class="split-lead">
<h2 id="adoptHeading">돌려 보려면 무엇이 필요한가</h2>
<p class="section-lead">
DirectCompute를 쓰므로 NVIDIA GPU를 권장합니다. 아래는 공개 기술 문서에 적힌 요구사항입니다.
</p>
</div>
<div class="split-body">
<table class="req">
<caption class="sr-only">RFS 시스템 요구사항 — 최소 사양과 권장 사양</caption>
<thead>
<tr>
<th scope="col">항목</th>
<th scope="col">최소</th>
<th scope="col">권장</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">운영체제</th>
<td>Windows 10 64bit</td>
<td>Windows 11</td>
</tr>
<tr>
<th scope="row">GPU</th>
<td>GTX 1660 · VRAM 6GB</td>
<td>RTX 3060 이상 · VRAM 8GB 이상</td>
</tr>
<tr>
<th scope="row">메모리</th>
<td>16 GB</td>
<td>16 GB 이상</td>
</tr>
<tr>
<th scope="row">엔진</th>
<td colspan="2">Unity 6.4 (6000.4.5f1) · URP 17.2</td>
</tr>
</tbody>
</table>
<div class="adopt-cta">
<p>
도입 검토와 기술 문의는 트웬티온스로 연락해 주세요.
제품은 독점 소프트웨어이며, 평가판 제공 여부는 협의가 필요합니다.
</p>
<a class="btn" href="mailto:hello@twentyoz.kr?subject=RFS%20%EB%8F%84%EC%9E%85%20%EB%AC%B8%EC%9D%98">
RFS 도입 문의
</a>
<p class="adopt-fine mono">hello@twentyoz.kr · 070-4353-1190</p>
</div>
</div>
</div>
</section>
</main>
<footer class="band band-dark site-foot">
<div class="wrap foot-inner">
<div>
<p class="foot-name">RFS — Realtime Fluid Simulator</p>
<p class="foot-line">데이터센터 열관리를 위한 실시간 GPU 유체 시뮬레이션 엔진</p>
</div>
<dl class="foot-meta mono">
<div><dt>버전</dt><dd>0.13.0</dd></div>
<div><dt>엔진</dt><dd>Unity 6.4 · URP 17.2</dd></div>
<div><dt>제작</dt><dd>Twentyoz Co., Ltd.</dd></div>
<div><dt>라이선스</dt><dd>Proprietary</dd></div>
</dl>
</div>
<div class="wrap foot-fine">
<p>
이 페이지의 수치는 RFS 공개 기술 문서에 적힌 값입니다.
실측 조건이 없는 정확도 지표는 표시하지 않습니다.
</p>
</div>
</footer>
<script src="./scripts/thermal-field.js?v=2" defer></script>
</body>
</html>