OpenAiTx.github.io/translate.html at main · zoosewu/OpenAiTx.github.io · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OpenAI TX - GitHub README Translator</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="translate.css" rel="stylesheet">
</head>

<body>
    <div class="container mt-4">
        <h1 class="text-center mb-4">OpenAI TX - GitHub README Translator</h1>

        <!-- Configuration Form -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Configuration</h5>
            </div>
            <div class="card-body">
                <form id="configForm">
                    <div class="mb-3">
                        <label for="githubToken" class="form-label">GitHub Personal Access Token</label>
                        <input type="password" class="form-control" id="githubToken" required>
                        <div class="form-text">Required for GitHub API access</div>
                    </div>
                    <div class="mb-3">
                        <label for="openAiKey" class="form-label">Azure OpenAI API Key</label>
                        <input type="password" class="form-control" id="openAiKey" required>
                    </div>
                    <div class="mb-3">
                        <label for="openAiEndpoint" class="form-label">Azure OpenAI API Endpoint</label>
                        <input type="url" class="form-control" id="openAiEndpoint" required>
                        <div class="form-text">Example:
                            https://your-resource.openai.azure.com/openai/deployments/gpt-4/chat/completions?api-version=2024-02-15-preview
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Save Configuration</button>
                </form>
            </div>
        </div>

        <!-- Search Form -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Search Projects</h5>
            </div>
            <div class="card-body">
                <form id="searchForm">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="minStars" class="form-label">Minimum Stars</label>
                            <input type="number" class="form-control" id="minStars" value="20" min="0">
                        </div>
                        <div class="col-md-4">
                            <label for="daysAgo" class="form-label">Days Ago</label>
                            <input type="number" class="form-control" id="daysAgo" value="30" min="0" max="365">
                        </div>
                        <div class="col-md-4">
                            <label for="perPage" class="form-label">Results Per Page</label>
                            <input type="number" class="form-control" id="perPage" value="3" min="1" max="10">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary mt-3">Search Projects</button>
                </form>
            </div>
        </div>

        <!-- Results Area -->
        <div id="results" class="card">
            <div class="card-header">
                <h5 class="mb-0">Search Results</h5>
            </div>
            <div class="card-body">
                <div id="projectsList" class="list-group">
                    <!-- Projects will be listed here -->
                </div>
            </div>
        </div>

        <!-- Translation Modal -->
        <div class="modal fade" id="translationModal" tabindex="-1">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Translation Progress</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div id="translationProgress"></div>
                        <div id="translationResults" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Default Statcounter code for openaitx
https://openaitx.github.io/ -->
    <script type="text/javascript">
        var sc_project = 13142514;
        var sc_invisible = 1;
        var sc_security = "d03a31d8";
    </script>
    <script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
    <noscript>
        <div class="statcounter"><a title="Web Analytics" href="https://statcounter.com/" target="_blank"><img
                    class="statcounter" src="https://c.statcounter.com/13142514/0/d03a31d8/1/" alt="Web Analytics"
                    referrerPolicy="no-referrer-when-downgrade"></a></div>
    </noscript>
    <!-- End of Statcounter Code -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="translate.js"></script>
</body>

</html>