SCAST/SCAST.html at main · davidkingzyb/SCAST · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>SCAST</title>

    <script src="./lib/acorn.js" async></script>
    <!-- <script src="./lib/filbert.js" async></script> -->
    <!-- <script src="./lib/typescript.min.js" async></script> -->

    <link rel="stylesheet" href="./scast.css">
    <link rel="stylesheet" href="./lib/vs2015.min.css">
    <script src="./lib/highlight.min.js"></script>
    <script src="./lib/highlightjs-line-numbers.min.js"></script>
    <script src="./lib/hlsl.min.js"></script>

    <script src="./lib/json-viewer.bundle.js" async></script>

    <script src="./lib/mermaid.min.js" async></script>
    <script src="./lib/d3.min.js" async></script>
    <script src="./js/D3M.js" async></script>
    <!-- <script src="./js/SCASTTS.js"></script> -->
    <!-- <script src="./js/ESTREEPY.js"></script> -->
    <script src="./js/ESTREEJS.js"></script>
    <script src="./js/TreeSitter.js" type="module"></script>
    <script src="./lib/SCAST.min.js"></script>
    <script src="./lib/SCASTPY.min.js"></script>

    <script src="./js/common.js"></script>
    <script src="./js/analysis.js"></script>
    <script src="./js/ai.js"></script>
</head>

<body style="margin-bottom: 90px;">
    <div id="title">
        <h1 style="display: inline;" class="pointer"><a href="https://github.com/davidkingzyb/SCAST" style="color:black;">️🔱 SCAST</a> </h1>
        <span class="pointer jump"
            onclick="scrollToView('mermaidUML',-window.innerHeight/2-20)" title="scroll to UML">🧜‍♀️</span>
        <span class="pointer jump"
            onclick="scrollToView('mermaidFlow',-window.innerHeight/2-20)" title="scroll to flow">🌊</span>
        <span class="pointer jump"
            onclick="scrollToView('FDP',-window.innerHeight/2-20)" title="scroll to FDG">❄️</span>
        <span class="pointer jump"
            onclick="scrollToView('D3Select',-window.innerHeight/2-20)" title="scroll to D3">🌳</span>
        <!-- <a href="https://davidkingzyb.github.io/blogmd/50.html"> by DKZ</a> -->
    </div>
    <details id="code_con" open>
        <summary id="code_con_summary">codes </summary>
    </details>
    <div id="code_panel">
        <div id="code_scroll">
            <div id="code">
<pre style="padding: 30px;font-size: 22px;">
HOW TO USE

1. select file by click 📄 at right corner
2. click ️🔱 generate AST
3. click 🧜‍♀️ analysis and show mermaid diagram
   click 🧜‍♀️ again for more details
   or click 🌳 show D3 diagram
4. click 🦙 use ollama AI analysis code

 find:/  find next:n  find prev:shift+n

                        © 2026 DKZ
</pre>
                <textarea name="" id="codetext" style="display: none;;" placeholder=""></textarea>
            </div>
        </div>

        <div id="codescaler"></div>
        <div id="codemover"></div>
    </div>
    <details id="mermaid_conf_con">
        <summary>mermaid <a onclick="reMermaid()" title="refresh mermaid">🔄️</a></summary>
        <div id="mermaid_conf_panel">
            <textarea name="" id="textUML" placeholder="Mermaid classDiagram UML code"></textarea><br>
            <textarea name="" id="textFlow" placeholder="Mermaid flowchart code"></textarea>

        </div>
    </details>
    <details id="d3_conf_con">
        <summary>config</summary>
        <details style="margin-top: 50px;" open>
            <summary title="Ollama AI config" >AI</summary>
            <select id="ai_models" onchange="onModelChange()" title="model"></select>
            <select id="ai_numctx" style="margin-top: 10px;" title="num ctx" onchange="onNumCtxChange()">
                <option value="4000">4k</option>
                <option value="8000">8k</option>
                <option value="16000" selected>16k</option>
                <option value="32000">32k</option>
            </select>
            <select name="" id="ai_language" title="language" onchange="onLanguageChange()">
                <option value="zh">zh</option>
                <option value="en">en</option>
            </select>

        </details>

        <details open>
            <summary title="Mermaid config">mermaid</summary>
            <div id="mermaidOption" class="opcls">
                <!-- <input type="checkbox" id="mmdop_relation" class="mmdops" checked /><label for="mmdop_relation">UML Relationship</label> -->
                <input type="checkbox" id="mmdop_click" class="mmdops" checked /><label for="mmdop_click" title="Click mermaid diagram jump to defined.">Can Click</label>
                <input type="checkbox" id="mmdop_method" class="mmdops" /><label for="mmdop_method" title="Use OOP paradigm analysis.">OOP</label>
                <input type="checkbox" id="mmdop_call" class="mmdops" checked /><label for="mmdop_call" title="Show function call detail.">Call Detail</label>
                <input type="checkbox" id="mmdop_idone" class="mmdops" checked /><label for="mmdop_idone" title="Function call and function define node use same node.">One ID</label>
                <input type="checkbox" id="mmdop_samename" class="mmdops" checked /><label for="mmdop_samename" title="deal with same name function.">Same Name</label>
                <input type="checkbox" id="mmdop_if" class="mmdops" /><label for="mmdop_if" title="Show if and loop in flow chart.">If and Loop</label>
                <!-- <input type="checkbox" id="mmdop_condition" class="mmdops" /><label for="mmdop_condition">Condition</label> -->
                <input type="checkbox" id="mmdop_namespace" class="mmdops" /><label for="mmdop_namespace" title="Layout by Namespace.">Namespace</label>
                <input type="checkbox" id="useTreeSitter" class="d3ops" checked /><label for="useTreeSitter" title="use TreeSitter">TreeSitter</label>
            </div>
        </details>


        <details>
            <summary title="D3 TreeSitter filter">TreeSitter</summary>
            <div id="D3TreeSitter" class="opcls"></div>
        </details>
        <details>
            <summary title="D3 SCAST filter">SCAST</summary>
            <div id="D3Option" class="opcls"></div>
        </details>
        <details>
            <summary title="D3 ESTree filter">ESTree</summary>
            <div id="D3ESTree" class="opcls"></div>
        </details>
    </details>
    <details id="outline_con">
        <summary>outline</summary>
        <div id="mmdfilter_con" class="opclsfilter"></div>
    </details>
    <div class="" id="load_con">
        <label class="input-file-button" for="codefile" title="1. open files">📄</label>
        <input type='file' id='codefile' multiple />
        <button id="load" class="pointer" onclick="load()" title="2. generate AST">🔱</button>
        <button onclick="genMermaid()" title="3. generate mermaid click twice for detail">🧜‍♀️</button>
        <button onclick="genD3()" title="3. generate D3">🌳</button>
        <button id="aibtn" class="pointer" style="display: none;" onclick="aiAnalysis()" title="4.AI Analysis" disabled>🦙</button>
    </div>
    <details class="json_con">
        <summary onclick="showJson()">json
            <input id="searchinput" type="text">
            <button onclick="search()" title="search json">🔍</button>
            <button onclick="storageAstJson()" title="save Ast json to storage">📥</button>
            <button onclick="loadAstJson()" title="load Ast json from storage">📤</button>
            <button onclick="saveScast()" title="save Ast json">💾</button>
        </summary>
        <json-viewer id="json"></json-viewer>
    </details>
    <details open>
        <summary id="mermaidHead">mermaid
            <button onclick="genMermaid()" title="generate mermaid">🧜‍♀️</button>
            <!-- <button onclick="storageMermaid()" title="save mermaid to storage">📥</button> -->
            <!-- <button onclick="loadMermaid()" title="load mermaid from storage">📤</button> -->
            <input id="searchMermaid" type="text">
            <button onclick="searchMermaid()" title="search mermaid">🔍</button>
            <button onclick="saveMermaid()" title="save mermaid">💾</button>
            <button onclick="scaleMermaid()" title="scale mermaid">🔛</button>
        </summary>

        <div id="mermaidPane">
            <!-- <pre class="mermaid" id="mermaidUML"></pre> -->
            <!-- <pre class="mermaid" id="mermaidFlow"></pre> -->
        </div>
        <div id="FDP"></div>
    </details>
    <details open>
        <summary>D3&nbsp;&nbsp;
            <select id="D3Select">
                <option value="IndentedTree">IndentedTree</option>
                <!-- <option value="treeMap">TreeMap</option> -->
                <option value="TidyTree">TidyTree</option>
                <option value="ClusterTree">ClusterTree</option>
                <option value="RadialTidyTree">RadialTidyTree</option>
                <option value="RadialClusterTree">RadialClusterTree</option>
                <option value="forceDirectedTree">ForceDirectedTree</option>
                <option value="EdgeBundling">EdgeBundling</option>
            </select>
            <button onclick="genD3()" title="generate D3">🌳</button>
            <button onclick="clearD3()" title="clear D3">🧹</button>
            <button onclick="scaleD3()" title="scale D3">🔛</button>
            <button onclick="fontSizeD3Minus(4)" title="scale font size">➖</button>
            <button onclick="fontSizeD3Plus(4)" title="scale font size">➕</button>
        </summary>
        <div id="D3Diagram"></div>
    </details>

</body>
<script>
    window.onload=function(){
        initFile()
        renderD3Option()
        initCodeScaler()
        getModels()
    }

</script>
</html>