experimental/piranha_playground/templates/index.html (156 lines of code) (raw):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Piranha Playground</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="{{ url_for('static', filename='styles.css') }}"
/>
</head>
<body>
<h3 class="text-center">Piranha Inference Playground</h3>
<div id="playground-container" class="container custom-container">
<div class="row align-items-center">
<div class="col-lg-2">
<select class="form-select" id="language-select">
<option value="java" selected="selected">Java</option>
<option value="kt">Kotlin</option>
<option value="go">Go</option>
</select>
</div>
<div class="col-lg-10 d-flex justify-content-end">
<div class="col-auto">
<button id="submit-button-test" class="btn btn-primary">
<span
id="spinner-test"
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
style="display: none"
></span>
<span id="button-text-test">Apply rule to before</span>
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6" id="code-container">
<h5>Code before</h5>
<textarea id="code-input-before"></textarea>
</div>
<div class="col-lg-6" id="tree-container">
<h5>Code after</h5>
<textarea id="code-input-after"></textarea>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<button id="submit-button-infer" class="btn btn-primary">
<span
id="spinner-infer"
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
style="display: none"
></span>
<span id="button-text-infer">Infer rules from templates</span>
</button>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-12" id="query-container" style="display: block">
<h5>Rules</h5>
<textarea id="query-input"></textarea>
</div>
<div
class="col-lg-6"
b
id="gpt-rule-explanation-container"
style="display: none"
>
<h5></h5>
<div id="explanation" class="markdown-body" hidden></div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-12" id="explanation-container" style="display: none">
<h5>Request GPT to add enclosing node or contains filters.</h5>
<textarea id="explanation-input"></textarea>
</div>
<div class="col-auto">
<button
id="submit-button-improvement"
class="btn btn-primary"
style="display: none"
>
<span
id="spinner-improvement"
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
style="display: none"
></span>
<span id="button-text-improvement">Improve rule</span>
</button>
</div>
</div>
<div class="row justify-content-center" style="padding-top: 1em">
<div id="alert-placeholder"></div>
</div>
<div class="row justify-content-center">
<div
class="col-lg-12 text-center"
id="path-container"
style="display: block"
>
<h5>
Refactor your codebase (warning: applying the rule graph will change
your files!)
</h5>
<div class="input-group">
<input
type="text"
id="folder-input"
class="form-control"
placeholder="Enter the folder path here"
/>
<div class="input-group-append">
<button id="submit-button-folder" class="btn btn-primary">
<span
id="spinner-folder"
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
style="display: none"
></span>
<span id="button-text-folder">Apply rules</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
var codeMirror =
"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0";
</script>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0//mode/toml/toml.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>