Spaces:

acecalisto3
/

GitBot

Runtime error

App Files Files Community

acecalisto3 commited on Dec 15, 2024

Commit

dd262f4

verified ·

1 Parent(s): e7a7e84

Update app.py

Browse files

Files changed (1) hide show

app.py +136 -193

app.py CHANGED Viewed

@@ -230,44 +230,14 @@ bot = GitHubBot()
 # HTML and CSS integration
 custom_html = """
 <!DOCTYPE html>
-<html>
 <head>
-    <title>GitHub Issue Manager</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
     <style>
-        body {
-            background: linear-gradient(to bottom right, #121212, #303030) !important;
-            color: #e0e0e0;
-            font-family: 'Roboto', sans-serif;
-            overflow-x: hidden; /* Prevent horizontal scrollbar */
-        }
-        .card {
-            border-radius: 1.5rem;
-            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2);
-            margin-bottom: 20px;
-        }
-        .input, .select, .textarea {
-            border: 2px solid #4a4a4a;
-            border-radius: 0.75rem;
-            padding-inline: 1.5rem;
-            padding-block: 0.75rem;
-        }
-        h1, h2, h3 {
-            color: #e0e0e0;
-        }
-        .output-area {
-            padding: 1.5rem;
-            border-radius: 0.75rem;
-        }
-        .btn {
-            border-radius: 0.75rem;
-            padding-block: 0.75rem;
-            padding-inline: 1.5rem;
-        }
         .btn-primary {
             background-color: #7928CA;
             color: white;
@@ -280,173 +250,146 @@ custom_html = """
         }
     </style>
 </head>
-<body class="bg-gray-900">
-<div class="container mx-auto p-4" >
-    <h1 class="text-4xl md:text-5xl font-extrabold text-center mb-8">GitHub Issue Manager</h1>
-    <!-- GitHub Token & Repo URL -->
-    <div class="card bg-gray-800 p-8">
-        <div class="form-control">
-            <label class="label">
-                <span class="label-text">GitHub Token</span>
-            </label>
-            <input type="password" placeholder="Enter your GitHub Personal Access Token" class="input input-bordered input-primary" id="github-token">
-        </div>
-        <div class="form-control">
-            <label class="label">
-                <span class="label-text">Repository URL</span>
-            </label>
-            <input type="text" placeholder="Enter the full GitHub repository URL" class="input input-bordered input-primary" id="repo-url">
         </div>
-    </div>
-    <!-- Fetch & Resolve Section -->
-    <div class="card bg-gray-800 p-8">
-        <div class="flex justify-between gap-4">
-            <button class="btn btn-primary" id="fetch-issues">Fetch Issues</button>
-            <select class="select select-primary w-full max-w-xs" id="issue-dropdown" >
-                <option disabled selected>Select Issue</option>
-            </select>
         </div>
-        <div class="form-control mt-4">
             <label class="label">
-                <span class="label-text">Resolution</span>
             </label>
-            <textarea class="textarea textarea-primary" placeholder="Enter the resolution details" id="resolution-textarea"></textarea>
         </div>
-        <div class="form-control mt-4">
-            <label class="label">
-                <span class="label-text">Forked Repository URL</span>
-            </label>
-            <input type="text" placeholder="URL to your forked repository (Optional)" class="input input-bordered input-primary" id="forked-repo-url">
-        </div>
-        <div class="form-control mt-4">
-            <button class="btn btn-success" id="resolve-issue">Resolve Issue</button>
-        </div>
-    </div>
-    <!-- Output Area -->
-    <div class="card bg-gray-800 p-8 mt-4" >
-        <label class="label">
-            <span class="label-text">Output</span>
-        </label>
-        <textarea class="textarea textarea-primary h-48" id="output-textarea" readonly></textarea>
-    </div>
-    <!-- URL to Extract -->
-    <div class="card bg-gray-800 p-8 mt-4">
-        <div class="form-control">
-            <label class="label">
-                <span class="label-text">URL</span>
-            </label>
-            <input type="text" placeholder="Enter a URL to extract information" class="input input-bordered input-primary" id="url-textbox">
-        </div>
-        <div class="form-control">
-            <button class="btn btn-primary" id="extract-info">Extract Info</button>
         </div>
     </div>
-</div>
-<script>
-    const githubTokenInput = document.getElementById('github-token');
-    const repoUrlInput = document.getElementById('repo-url');
-    const fetchIssuesButton = document.getElementById('fetch-issues');
-    const issueDropdown = document.getElementById('issue-dropdown');
-    const resolutionTextarea = document.getElementById('resolution-textarea');
-    const forkedRepoUrlInput = document.getElementById('forked-repo-url');
-    const resolveIssueButton = document.getElementById('resolve-issue');
-    const outputTextarea = document.getElementById('output-textarea');
-    const urlTextbox = document.getElementById('url-textbox');
-    const extractInfoButton = document.getElementById('extract-info');
-    fetchIssuesButton.addEventListener('click', async () => {
-      const token = githubTokenInput.value;
-      const repoUrl = repoUrlInput.value;
-      if (!token || !repoUrl) {
-        outputTextarea.value = "Please provide both GitHub Token and Repository URL.";
-        return;
-      }
-      try {
-        const response = await fetch('/fetch_issues', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ token: token, repoUrl: repoUrl }),
-        });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const data = await response.json();
-        if (data.error) {
-            outputTextarea.value = data.error;
-        } else {
-            issueDropdown.innerHTML = '';
-            data.issues.forEach(issue => {
-                const option = document.createElement('option');
-                option.value = issue.number;
-                option.text = `${issue.number}: ${issue.title}`;
-                issueDropdown.add(option);
-            });
-        }
-      } catch (error) {
-        outputTextarea.value = `Error fetching issues: ${error.message}`;
-      }
-    });
-    resolveIssueButton.addEventListener('click', async () => {
-      const token = githubTokenInput.value;
-      const repoUrl = repoUrlInput.value;
-      const issueNumber = issueDropdown.value;
-      const resolution = resolutionTextarea.value;
-      const forkedRepoUrl = forkedRepoUrlInput.value;
-      if (!token || !repoUrl || !issueNumber || !resolution) {
-        outputTextarea.value ="Please provide all required fields.";
-        return;
-      }
-      try {
-        const response = await fetch('/resolve_issue', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ token: token, repoUrl: repoUrl, issueNumber: issueNumber, resolution: resolution, forkedRepoUrl: forkedRepoUrl }),
-        });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const data = await response.json();
-        if (data.error) {
-            outputTextarea.value = data.error;
-        } else {
-            outputTextarea.value = data.result;
-        }
-      } catch (error) {
-        outputTextarea.value = `Error resolving issue: ${error.message}`;
-      }
-    });
-    extractInfoButton.addEventListener('click', async () => {
-      const url = urlTextbox.value;
-      if (!url) {
-        outputTextarea.value = "Please provide a URL.";
-        return;
-      }
-      try {
-        const response = await fetch('/extract_info', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({ url: url }),
         });
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        const data = await response.json();
-        if (data.error) {
-            outputTextarea.value = data.error;
-        } else {
-            outputTextarea.value = JSON.stringify(data, null, 2);
-        }
-      } catch (error) {
-        outputTextarea.value = `Error extracting info: ${error.message}`;
-      }
-    });
-</script>
 </body>
 </html>
 """

 # HTML and CSS integration
 custom_html = """
 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub Issue Manager</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
     <style>
         .btn-primary {
             background-color: #7928CA;
             color: white;
         }
     </style>
 </head>
+<body>
+    <div id="app" class="container mx-auto p-4">
+        <h1 class="text-4xl md:text-5xl font-extrabold text-center mb-8">GitHub Issue Manager</h1>
+        <div class="card bg-gray-800 p-8">
+            <div class="form-control">
+                <label class="label">
+                    <span class="label-text">GitHub Token</span>
+                </label>
+                <input type="password" placeholder="Enter your GitHub Personal Access Token" class="input input-bordered input-primary" v-model="githubToken">
+            </div>
+            <div class="form-control">
+                <label class="label">
+                    <span class="label-text">Repository URL</span>
+                </label>
+                <input type="text" placeholder="Enter the full GitHub repository URL" class="input input-bordered input-primary" v-model="repoUrl">
+            </div>
         </div>
+        <div class="card bg-gray-800 p-8">
+            <div class="flex justify-between gap-4">
+                <button class="btn btn-primary" @click="fetchIssues">Fetch Issues</button>
+                <select class="select select-primary w-full max-w-xs" v-model="selectedIssue">
+                    <option disabled="" selected="">Select Issue</option>
+                    <option v-for="issue in issues" :key="issue.id" :value="issue">{{ issue.title }}</option>
+                </select>
+            </div>
+            <div class="form-control mt-4">
+                <label class="label">
+                    <span class="label-text">Resolution</span>
+                </label>
+                <textarea class="textarea textarea-primary" placeholder="Enter the resolution details" v-model="resolution"></textarea>
+            </div>
+            <div class="form-control mt-4">
+                <label class="label">
+                    <span class="label-text">Forked Repository URL</span>
+                </label>
+                <input type="text" placeholder="URL to your forked repository (Optional)" class="input input-bordered input-primary" v-model="forkedRepoUrl">
+            </div>
+            <div class="form-control mt-4">
+                <button class="btn btn-success" @click="resolveIssue">Resolve Issue</button>
+            </div>
         </div>
+        <div class="card bg-gray-800 p-8 mt-4">
             <label class="label">
+                <span class="label-text">Output</span>
             </label>
+            <textarea class="textarea textarea-primary h-48" v-model="output" readonly></textarea>
         </div>
+        <div class="card bg-gray-800 p-8 mt-4">
+            <div class="form-control">
+                <label class="label">
+                    <span class="label-text">URL</span>
+                </label>
+                <input type="text" placeholder="Enter a URL to extract information" class="input input-bordered input-primary" v-model="url">
+            </div>
+            <div class="form-control">
+                <button class="btn btn-primary" @click="extractInfo">Extract Info</button>
+            </div>
         </div>
     </div>
+    <script>
+        new Vue({
+            el: '#app',
+            data: {
+                githubToken: '',
+                repoUrl: '',
+                issues: [],
+                selectedIssue: '',
+                resolution: '',
+                forkedRepoUrl: '',
+                output: '',
+                url: ''
+            },
+            methods: {
+                fetchIssues() {
+                    fetch('/fetch-issues', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            githubToken: this.githubToken,
+                            repoUrl: this.repoUrl
+                        })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        this.issues = data.issues;
+                    })
+                    .catch(error => {
+                        console.error(error);
+                    });
+                },
+                resolveIssue() {
+                    fetch('/resolve-issue', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            githubToken: this.githubToken,
+                            repoUrl: this.repoUrl,
+                            issue: this.selectedIssue,
+                            resolution: this.resolution,
+                            forkedRepoUrl: this.forkedRepoUrl
+                        })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        this.output = data.output;
+                    })
+                    .catch(error => {
+                        console.error(error);
+                    });
+                },
+                extractInfo() {
+                    fetch('/extract-info', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            url: this.url
+                        })
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        this.output = data.output;
+                    })
+                    .catch(error => {
+                        console.error(error);
+                    });
+                }
+            }
         });
+    </script>
 </body>
 </html>
 """