Hugging Face's logo

Spaces:
FourLabs-UN2
/
codedoc-ai-automated-code-guardians
Running

App Files Community
FourLabs-UN2 commited on
Commit
e9077cf
·
verified ·
1 Parent(s): 4bec1b6

Monte com sidebar e essas cores: colors: {

Browse files

primary: '#21223a',
secondary: '#ff580f',
}

Monte uma aplicação completa de documentar código automaticamente, onde o sistema detecta um git push na branch main, por exemplo, e chama os agentes de IA para documentar o código e fazer um code review, logo após isso ele chama os agentes para fazerem os testes e rodar os testes do que foi feito push e depois um agente para notificar o time por email ou fazer auto deploy.

monte uma aplicação bonita e profissional e completa.

Files changed (6) hide show
  1. README.md +8 -5
  2. components/header.js +48 -0
  3. components/sidebar.js +93 -0
  4. index.html +180 -19
  5. script.js +64 -0
  6. style.css +42 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Codedoc Ai Automated Code Guardians
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CodeDoc AI - Automated Code Guardians ️
3
+ colorFrom: red
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/header.js ADDED
@@ -0,0 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomHeader extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .header {
7
+ height: 70px;
8
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
9
+ }
10
+ .search-input {
11
+ transition: all 0.3s;
12
+ }
13
+ .search-input:focus {
14
+ width: 300px;
15
+ }
16
+ .notification-badge {
17
+ top: -5px;
18
+ right: -5px;
19
+ }
20
+ .avatar {
21
+ transition: all 0.2s;
22
+ }
23
+ .avatar:hover {
24
+ transform: scale(1.1);
25
+ }
26
+ </style>
27
+ <header class="header bg-white flex items-center justify-between px-6 sticky top-0 z-10">
28
+ <div class="flex items-center">
29
+ <button id="mobileMenuButton" class="mr-4 md:hidden">
30
+ <i data-feather="menu"></i>
31
+ </button>
32
+ <div class="relative">
33
+ <input type="text" placeholder="Search..." class="search-input bg-gray-100 rounded-full py-2 px-4 pl-10 w-40 focus:w-60 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-opacity-50">
34
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
35
+ </div>
36
+ </div>
37
+ <div class="flex items-center space-x-4">
38
+ <button class="p-2 rounded-full hover:bg-gray-100 relative">
39
+ <i data-feather="bell"></i>
40
+ <span class="notification-badge absolute bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center pulse">3</span>
41
+ </button>
42
+ <button class="p-2 rounded-full hover:bg-gray-100">
43
+ <i data-feather="mail"></i>
44
+ </button>
45
+ <button class="p-2 rounded-full hover:bg-gray-100">
46
+ <i data-feather="help-circle"></i>
47
+ </button>
48
+ <div class="
components/sidebar.js ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomSidebar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ .sidebar {
7
+ width: 280px;
8
+ transition: all 0.3s;
9
+ }
10
+ .sidebar-item {
11
+ transition: all 0.2s;
12
+ }
13
+ .sidebar-item:hover {
14
+ background-color: rgba(255, 88, 15, 0.1);
15
+ }
16
+ .sidebar-item.active {
17
+ background-color: rgba(255, 88, 15, 0.1);
18
+ border-left: 3px solid #ff580f;
19
+ }
20
+ .sidebar-item.active .sidebar-icon {
21
+ color: #ff580f;
22
+ }
23
+ .sidebar-item.active .sidebar-text {
24
+ color: #21223a;
25
+ font-weight: 500;
26
+ }
27
+ @media (max-width: 768px) {
28
+ .sidebar {
29
+ width: 0;
30
+ overflow: hidden;
31
+ }
32
+ .sidebar.open {
33
+ width: 280px;
34
+ }
35
+ }
36
+ </style>
37
+ <div class="sidebar bg-primary text-white h-full flex flex-col">
38
+ <div class="p-6 border-b border-primary-light">
39
+ <h2 class="text-xl font-bold flex items-center">
40
+ <i data-feather="shield" class="mr-2"></i>
41
+ CodeDoc AI
42
+ </h2>
43
+ </div>
44
+ <div class="flex-1 overflow-y-auto py-4">
45
+ <div class="px-4 space-y-1">
46
+ <a href="/" class="flex items-center px-4 py-3 rounded-lg sidebar-item active">
47
+ <i data-feather="home" class="sidebar-icon mr-3"></i>
48
+ <span class="sidebar-text">Dashboard</span>
49
+ </a>
50
+ <a href="/repositories" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
51
+ <i data-feather="github" class="sidebar-icon mr-3"></i>
52
+ <span class="sidebar-text">Repositories</span>
53
+ </a>
54
+ <a href="/documentation" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
55
+ <i data-feather="file-text" class="sidebar-icon mr-3"></i>
56
+ <span class="sidebar-text">Documentation</span>
57
+ </a>
58
+ <a href="/code-reviews" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
59
+ <i data-feather="check-circle" class="sidebar-icon mr-3"></i>
60
+ <span class="sidebar-text">Code Reviews</span>
61
+ </a>
62
+ <a href="/testing" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
63
+ <i data-feather="cpu" class="sidebar-icon mr-3"></i>
64
+ <span class="sidebar-text">Testing</span>
65
+ </a>
66
+ <a href="/deployments" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
67
+ <i data-feather="upload" class="sidebar-icon mr-3"></i>
68
+ <span class="sidebar-text">Deployments</span>
69
+ </a>
70
+ <a href="/settings" class="flex items-center px-4 py-3 rounded-lg sidebar-item">
71
+ <i data-feather="settings" class="sidebar-icon mr-3"></i>
72
+ <span class="sidebar-text">Settings</span>
73
+ </a>
74
+ </div>
75
+ </div>
76
+ <div class="p-4 border-t border-primary-light">
77
+ <div class="flex items-center px-4 py-3 rounded-lg sidebar-item">
78
+ <div class="relative mr-3">
79
+ <img src="http://static.photos/people/200x200/42" class="w-8 h-8 rounded-full" alt="User">
80
+ <span class="absolute bottom-0 right-0 w-2 h-2 bg-green-500 rounded-full border border-white"></span>
81
+ </div>
82
+ <div>
83
+ <p class="sidebar-text text-sm">John Doe</p>
84
+ <p class="text-xs opacity-70">Admin</p>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ `;
90
+ }
91
+ }
92
+
93
+ customElements.define('custom-sidebar', CustomSidebar);
index.html CHANGED
@@ -1,19 +1,180 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CodeDoc AI - Automated Code Guardians</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#21223a',
15
+ secondary: '#ff580f',
16
+ }
17
+ }
18
+ }
19
+ }
20
+ </script>
21
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
22
+ <script src="https://unpkg.com/feather-icons"></script>
23
+ </head>
24
+ <body class="bg-gray-50">
25
+ <div class="flex h-screen overflow-hidden">
26
+ <!-- Sidebar -->
27
+ <script src="components/sidebar.js"></script>
28
+ <custom-sidebar></custom-sidebar>
29
+
30
+ <!-- Main Content -->
31
+ <div class="flex-1 overflow-auto">
32
+ <!-- Header -->
33
+ <script src="components/header.js"></script>
34
+ <custom-header></custom-header>
35
+
36
+ <!-- Dashboard Content -->
37
+ <main class="p-6">
38
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
39
+ <!-- Stats Cards -->
40
+ <div class="bg-white rounded-lg shadow p-6">
41
+ <div class="flex items-center justify-between">
42
+ <div>
43
+ <p class="text-gray-500">Projects Documented</p>
44
+ <h3 class="text-2xl font-bold text-primary">142</h3>
45
+ </div>
46
+ <div class="p-3 rounded-full bg-primary bg-opacity-10">
47
+ <i data-feather="file-text" class="text-primary"></i>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <div class="bg-white rounded-lg shadow p-6">
53
+ <div class="flex items-center justify-between">
54
+ <div>
55
+ <p class="text-gray-500">Code Reviews</p>
56
+ <h3 class="text-2xl font-bold text-secondary">89</h3>
57
+ </div>
58
+ <div class="p-3 rounded-full bg-secondary bg-opacity-10">
59
+ <i data-feather="check-circle" class="text-secondary"></i>
60
+ </div>
61
+ </div>
62
+ </div>
63
+
64
+ <div class="bg-white rounded-lg shadow p-6">
65
+ <div class="flex items-center justify-between">
66
+ <div>
67
+ <p class="text-gray-500">Tests Executed</p>
68
+ <h3 class="text-2xl font-bold text-primary">1,253</h3>
69
+ </div>
70
+ <div class="p-3 rounded-full bg-primary bg-opacity-10">
71
+ <i data-feather="cpu" class="text-primary"></i>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Recent Activity -->
78
+ <div class="mt-8 bg-white rounded-lg shadow overflow-hidden">
79
+ <div class="p-6 border-b border-gray-200">
80
+ <h3 class="text-lg font-medium text-primary">Recent Activity</h3>
81
+ </div>
82
+ <div class="divide-y divide-gray-200">
83
+ <div class="p-6 hover:bg-gray-50 transition-colors">
84
+ <div class="flex items-start">
85
+ <div class="p-2 rounded-full bg-secondary bg-opacity-10 mr-4">
86
+ <i data-feather="git-commit" class="text-secondary"></i>
87
+ </div>
88
+ <div class="flex-1">
89
+ <div class="flex items-center justify-between">
90
+ <h4 class="font-medium">New Push to main</h4>
91
+ <span class="text-sm text-gray-500">2 min ago</span>
92
+ </div>
93
+ <p class="text-gray-600 mt-1">Documentation generated for user-service module</p>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ <div class="p-6 hover:bg-gray-50 transition-colors">
98
+ <div class="flex items-start">
99
+ <div class="p-2 rounded-full bg-primary bg-opacity-10 mr-4">
100
+ <i data-feather="check-circle" class="text-primary"></i>
101
+ </div>
102
+ <div class="flex-1">
103
+ <div class="flex items-center justify-between">
104
+ <h4 class="font-medium">Code Review Completed</h4>
105
+ <span class="text-sm text-gray-500">15 min ago</span>
106
+ </div>
107
+ <p class="text-gray-600 mt-1">5 issues found in payment-service</p>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <div class="p-6 hover:bg-gray-50 transition-colors">
112
+ <div class="flex items-start">
113
+ <div class="p-2 rounded-full bg-secondary bg-opacity-10 mr-4">
114
+ <i data-feather="zap" class="text-secondary"></i>
115
+ </div>
116
+ <div class="flex-1">
117
+ <div class="flex items-center justify-between">
118
+ <h4 class="font-medium">Tests Executed</h4>
119
+ <span class="text-sm text-gray-500">30 min ago</span>
120
+ </div>
121
+ <p class="text-gray-600 mt-1">All 42 tests passed in auth-service</p>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Setup Guide -->
129
+ <div class="mt-8 bg-white rounded-lg shadow overflow-hidden">
130
+ <div class="p-6 border-b border-gray-200">
131
+ <h3 class="text-lg font-medium text-primary">Setup Instructions</h3>
132
+ </div>
133
+ <div class="p-6">
134
+ <div class="space-y-4">
135
+ <div class="flex items-start">
136
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
137
+ <span class="text-primary font-bold">1</span>
138
+ </div>
139
+ <div>
140
+ <h4 class="font-medium">Connect Your Repository</h4>
141
+ <p class="text-gray-600 mt-1">Link your GitHub, GitLab, or Bitbucket repository to get started.</p>
142
+ </div>
143
+ </div>
144
+ <div class="flex items-start">
145
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
146
+ <span class="text-primary font-bold">2</span>
147
+ </div>
148
+ <div>
149
+ <h4 class="font-medium">Configure Workflow</h4>
150
+ <p class="text-gray-600 mt-1">Set up which branches should trigger the automation pipeline.</p>
151
+ </div>
152
+ </div>
153
+ <div class="flex items-start">
154
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-primary bg-opacity-10 flex items-center justify-center mr-4">
155
+ <span class="text-primary font-bold">3</span>
156
+ </div>
157
+ <div>
158
+ <h4 class="font-medium">Customize Agents</h4>
159
+ <p class="text-gray-600 mt-1">Configure documentation, testing, and deployment agents.</p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ <button class="mt-6 bg-secondary text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-colors flex items-center">
164
+ <i data-feather="plus" class="mr-2"></i> Connect Repository
165
+ </button>
166
+ </div>
167
+ </div>
168
+ </main>
169
+ </div>
170
+ </div>
171
+
172
+ <script src="components/sidebar.js"></script>
173
+ <script src="components/header.js"></script>
174
+ <script src="script.js"></script>
175
+ <script>
176
+ feather.replace();
177
+ </script>
178
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
179
+ </body>
180
+ </html>
script.js ADDED
@@ -0,0 +1,64 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Initialize tooltips
3
+ const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
4
+ tooltipTriggerList.map(function (tooltipTriggerEl) {
5
+ return new bootstrap.Tooltip(tooltipTriggerEl);
6
+ });
7
+
8
+ // Dark mode toggle functionality
9
+ const darkModeToggle = document.getElementById('darkModeToggle');
10
+ if (darkModeToggle) {
11
+ darkModeToggle.addEventListener('click', function() {
12
+ document.documentElement.classList.toggle('dark');
13
+ localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
14
+ });
15
+ }
16
+
17
+ // Check for saved dark mode preference
18
+ if (localStorage.getItem('darkMode') === 'true') {
19
+ document.documentElement.classList.add('dark');
20
+ }
21
+
22
+ // Mobile menu toggle
23
+ const mobileMenuButton = document.getElementById('mobileMenuButton');
24
+ const mobileMenu = document.getElementById('mobileMenu');
25
+ if (mobileMenuButton && mobileMenu) {
26
+ mobileMenuButton.addEventListener('click', function() {
27
+ mobileMenu.classList.toggle('hidden');
28
+ });
29
+ }
30
+ });
31
+
32
+ // Sample function to simulate API call
33
+ async function connectRepository() {
34
+ try {
35
+ // Simulate API call
36
+ await new Promise(resolve => setTimeout(resolve, 1000));
37
+ return { success: true, message: 'Repository connected successfully' };
38
+ } catch (error) {
39
+ return { success: false, message: 'Failed to connect repository' };
40
+ }
41
+ }
42
+
43
+ // Event listeners for interactive elements
44
+ document.querySelectorAll('[data-action="connect-repo"]').forEach(button => {
45
+ button.addEventListener('click', async function() {
46
+ const spinner = document.createElement('span');
47
+ spinner.className = 'animate-spin mr-2';
48
+ spinner.innerHTML = '<i data-feather="loader"></i>';
49
+ this.prepend(spinner);
50
+ feather.replace();
51
+
52
+ this.disabled = true;
53
+ const result = await connectRepository();
54
+
55
+ spinner.remove();
56
+ this.disabled = false;
57
+
58
+ if (result.success) {
59
+ alert('Repository connected successfully!');
60
+ } else {
61
+ alert('Error: ' + result.message);
62
+ }
63
+ });
64
+ });
style.css CHANGED
@@ -1,28 +1,52 @@
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
28
  }
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2
+
3
  body {
4
+ font-family: 'Inter', sans-serif;
5
+ }
6
+
7
+ /* Custom scrollbar */
8
+ ::-webkit-scrollbar {
9
+ width: 6px;
10
+ height: 6px;
11
+ }
12
+
13
+ ::-webkit-scrollbar-track {
14
+ background: #f1f1f1;
15
+ }
16
+
17
+ ::-webkit-scrollbar-thumb {
18
+ background: #888;
19
+ border-radius: 3px;
20
  }
21
 
22
+ ::-webkit-scrollbar-thumb:hover {
23
+ background: #555;
 
24
  }
25
 
26
+ /* Animation for notification badge */
27
+ @keyframes pulse {
28
+ 0% {
29
+ transform: scale(1);
30
+ opacity: 1;
31
+ }
32
+ 50% {
33
+ transform: scale(1.1);
34
+ opacity: 0.8;
35
+ }
36
+ 100% {
37
+ transform: scale(1);
38
+ opacity: 1;
39
+ }
40
  }
41
 
42
+ .pulse {
43
+ animation: pulse 2s infinite;
 
 
 
 
44
  }
45
 
46
+ /* Transition effects */
47
+ .fade-enter-active, .fade-leave-active {
48
+ transition: opacity 0.3s;
49
  }
50
+ .fade-enter, .fade-leave-to {
51
+ opacity: 0;
52
+ }