mirror of
https://github.com/arkorty/prodmon.git
synced 2026-03-17 16:51:46 +00:00
...
This commit is contained in:
Arkaprabha Chakraborty
92
.gitignore
vendored
Normal file
92
.gitignore
vendored
Normal file
@@ -0,0 +1,92 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
.DS_Store
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# TypeScript v1 declaration files
|
||||
typings/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
.env.test
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
|
||||
# next.js build output
|
||||
.next
|
||||
|
||||
# nuxt.js build output
|
||||
.nuxt
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# Webpack
|
||||
.webpack/
|
||||
|
||||
# Vite
|
||||
.vite/
|
||||
|
||||
# Electron-Forge
|
||||
out/
|
||||
44
forge.config.js
Normal file
44
forge.config.js
Normal file
@@ -0,0 +1,44 @@
|
||||
const { FusesPlugin } = require('@electron-forge/plugin-fuses');
|
||||
const { FuseV1Options, FuseVersion } = require('@electron/fuses');
|
||||
|
||||
module.exports = {
|
||||
packagerConfig: {
|
||||
asar: true,
|
||||
},
|
||||
rebuildConfig: {},
|
||||
makers: [
|
||||
{
|
||||
name: '@electron-forge/maker-squirrel',
|
||||
config: {},
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-zip',
|
||||
platforms: ['darwin'],
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-deb',
|
||||
config: {},
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-rpm',
|
||||
config: {},
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
{
|
||||
name: '@electron-forge/plugin-auto-unpack-natives',
|
||||
config: {},
|
||||
},
|
||||
// Fuses are used to enable/disable various Electron functionality
|
||||
// at package time, before code signing the application
|
||||
new FusesPlugin({
|
||||
version: FuseVersion.V1,
|
||||
[FuseV1Options.RunAsNode]: false,
|
||||
[FuseV1Options.EnableCookieEncryption]: true,
|
||||
[FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
|
||||
[FuseV1Options.EnableNodeCliInspectArguments]: false,
|
||||
[FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
|
||||
[FuseV1Options.OnlyLoadAppFromAsar]: true,
|
||||
}),
|
||||
],
|
||||
};
|
||||
6223
package-lock.json
generated
Normal file
6223
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
36
package.json
Normal file
36
package.json
Normal file
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "monitor",
|
||||
"productName": "Monitor",
|
||||
"version": "1.0.0",
|
||||
"description": "Desktop monitoring application",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"start": "electron-forge start",
|
||||
"package": "electron-forge package",
|
||||
"make": "electron-forge make",
|
||||
"publish": "electron-forge publish",
|
||||
"lint": "echo \"No linting configured\""
|
||||
},
|
||||
"keywords": [],
|
||||
"author": {
|
||||
"name": "Arkaprabha Chakraborty",
|
||||
"email": "arkorty@gmail.com"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
"python-bridge": "^1.1.0",
|
||||
"screenshot-desktop": "^1.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@electron-forge/cli": "^7.8.1",
|
||||
"@electron-forge/maker-deb": "^7.8.1",
|
||||
"@electron-forge/maker-rpm": "^7.8.1",
|
||||
"@electron-forge/maker-squirrel": "^7.8.1",
|
||||
"@electron-forge/maker-zip": "^7.8.1",
|
||||
"@electron-forge/plugin-auto-unpack-natives": "^7.8.1",
|
||||
"@electron-forge/plugin-fuses": "^7.8.1",
|
||||
"@electron/fuses": "^1.8.0",
|
||||
"electron": "36.4.0"
|
||||
}
|
||||
}
|
||||
386
src/index.css
Normal file
386
src/index.css
Normal file
@@ -0,0 +1,386 @@
|
||||
/* Base styles */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--error-color: #ef4444;
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f3f4f6;
|
||||
--border-color: #e5e7eb;
|
||||
--sidebar-width: 300px;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
|
||||
Arial, sans-serif;
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.app-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: var(--sidebar-width);
|
||||
background-color: var(--bg-primary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
padding: 1.5rem;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
margin-left: var(--sidebar-width);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Header styles */
|
||||
.app-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-indicator.active .status-dot {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Stats and monitoring */
|
||||
.monitoring-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: 0.5rem;
|
||||
height: 0.5rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: var(--primary-color);
|
||||
height: 100%;
|
||||
transition: width 1s linear;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.content-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.content-header h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.view-btn:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.view-btn.active {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Screenshot grid */
|
||||
.screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.screenshot-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.screenshot-card {
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.screenshot-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.screenshot-preview {
|
||||
position: relative;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
|
||||
.screenshot-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.screenshot-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 1rem;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
color: white;
|
||||
}
|
||||
|
||||
.screenshot-time {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.screenshot-details {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* Analysis styles */
|
||||
.analysis-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.analysis-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.analysis-indicator.success {
|
||||
background-color: var(--success-color);
|
||||
}
|
||||
|
||||
.analysis-indicator.warning {
|
||||
background-color: var(--warning-color);
|
||||
}
|
||||
|
||||
.analysis-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid var(--border-color);
|
||||
border-top-color: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.analysis-summary {
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.analysis-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.role-badge {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.confidence-score {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.anomalies-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.anomaly-item {
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.anomaly-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.anomaly-type {
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.anomaly-confidence {
|
||||
font-size: 0.75rem;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.anomaly-explanation {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Notifications */
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
border-left: 4px solid var(--success-color);
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
border-left: 4px solid var(--error-color);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Error states */
|
||||
.analysis-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: currentColor;
|
||||
}
|
||||
222
src/index.html
Normal file
222
src/index.html
Normal file
@@ -0,0 +1,222 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Screen Monitor Pro</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<div class="sidebar">
|
||||
<div class="app-header">
|
||||
<h1>Screen Monitor Pro</h1>
|
||||
<div class="status-indicator active">
|
||||
<span class="status-dot"></span>
|
||||
Monitoring Active
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="monitoring-stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-title">Next Screenshot</div>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="screenshotProgress"></div>
|
||||
<div class="progress-text" id="countdown">30s</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-title">Today's Activity</div>
|
||||
<div class="stat-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="totalScreenshots">0</span>
|
||||
<span class="stat-label">Screenshots</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value" id="totalAnomalies">0</span>
|
||||
<span class="stat-label">Anomalies</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-content">
|
||||
<div class="content-header">
|
||||
<h2>Recent Activity</h2>
|
||||
<div class="view-controls">
|
||||
<button class="view-btn active" data-view="grid">Grid View</button>
|
||||
<button class="view-btn" data-view="list">List View</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notification" class="notification"></div>
|
||||
|
||||
<div class="screenshot-grid" id="screenshotList">
|
||||
<!-- Screenshots will be added here dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { ipcRenderer } = require("electron");
|
||||
let totalScreenshots = 0;
|
||||
let totalAnomalies = 0;
|
||||
|
||||
function updateCountdown(seconds) {
|
||||
const progressBar = document.getElementById("screenshotProgress");
|
||||
const countdownElement = document.getElementById("countdown");
|
||||
|
||||
// Update progress bar
|
||||
const progressPercent = (seconds / 30) * 100;
|
||||
progressBar.style.width = `${progressPercent}%`;
|
||||
|
||||
// Update countdown text
|
||||
const minutes = Math.floor(seconds / 60);
|
||||
const remainingSeconds = seconds % 60;
|
||||
countdownElement.textContent = `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function showNotification(message, type = "success") {
|
||||
const notification = document.getElementById("notification");
|
||||
notification.textContent = message;
|
||||
notification.className = `notification ${type}`;
|
||||
notification.style.display = "block";
|
||||
|
||||
setTimeout(() => {
|
||||
notification.style.display = "none";
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function addScreenshotToList(screenshotPath) {
|
||||
const list = document.getElementById("screenshotList");
|
||||
const item = document.createElement("div");
|
||||
item.className = "screenshot-card";
|
||||
item.id = `screenshot-${screenshotPath.split("/").pop()}`;
|
||||
|
||||
const timestamp = new Date().toLocaleString();
|
||||
const relativePath = screenshotPath.split("/").pop();
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="screenshot-preview">
|
||||
<img src="file://${screenshotPath}" alt="Screenshot">
|
||||
<div class="screenshot-overlay">
|
||||
<div class="screenshot-time">${timestamp}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="screenshot-details">
|
||||
<div class="analysis-status">
|
||||
<div class="analysis-indicator"></div>
|
||||
<span>Analyzing...</span>
|
||||
</div>
|
||||
<div class="analysis-result loading">
|
||||
<div class="analysis-spinner"></div>
|
||||
Analyzing screenshot...
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
list.insertBefore(item, list.firstChild);
|
||||
|
||||
// Update stats
|
||||
totalScreenshots++;
|
||||
document.getElementById("totalScreenshots").textContent = totalScreenshots;
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
function updateScreenshotAnalysis(screenshotPath, analysis) {
|
||||
const item = document.getElementById(`screenshot-${screenshotPath.split("/").pop()}`);
|
||||
if (item) {
|
||||
const analysisDiv = item.querySelector(".analysis-result");
|
||||
const statusDiv = item.querySelector(".analysis-status");
|
||||
analysisDiv.className = "analysis-result";
|
||||
|
||||
if (!analysis || analysis.status !== "success" || !analysis.analysis) {
|
||||
analysisDiv.innerHTML = `
|
||||
<div class="analysis-error">
|
||||
<svg viewBox="0 0 24 24" class="error-icon">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
|
||||
</svg>
|
||||
No analysis available
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const a = analysis.analysis;
|
||||
const hasAnomalies = a.anomalies && a.anomalies.length > 0;
|
||||
|
||||
if (hasAnomalies) {
|
||||
totalAnomalies += a.anomalies.length;
|
||||
document.getElementById("totalAnomalies").textContent = totalAnomalies;
|
||||
}
|
||||
|
||||
statusDiv.innerHTML = `
|
||||
<div class="analysis-indicator ${hasAnomalies ? 'warning' : 'success'}"></div>
|
||||
<span>${hasAnomalies ? 'Anomaly Detected' : 'No Anomalies'}</span>
|
||||
`;
|
||||
|
||||
let html = `
|
||||
<div class="analysis-summary ${hasAnomalies ? 'has-anomalies' : ''}">
|
||||
<div class="analysis-header">
|
||||
<span class="role-badge">${a.baseline_role}</span>
|
||||
<span class="confidence-score">
|
||||
${hasAnomalies ? `Confidence: ${Math.round(a.anomalies[0].confidence * 100)}%` : ''}
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (hasAnomalies) {
|
||||
html += '<div class="anomalies-list">';
|
||||
a.anomalies.forEach(anomaly => {
|
||||
html += `
|
||||
<div class="anomaly-item">
|
||||
<div class="anomaly-header">
|
||||
<span class="anomaly-type">${anomaly.type.replace(/([A-Z])/g, ' $1').trim()}</span>
|
||||
<span class="anomaly-confidence">${Math.round(anomaly.confidence * 100)}%</span>
|
||||
</div>
|
||||
<p class="anomaly-explanation">${anomaly.explanation}</p>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
analysisDiv.innerHTML = html;
|
||||
}
|
||||
}
|
||||
|
||||
// View switching functionality
|
||||
document.querySelectorAll('.view-btn').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
const view = btn.dataset.view;
|
||||
const list = document.getElementById('screenshotList');
|
||||
list.className = view === 'grid' ? 'screenshot-grid' : 'screenshot-list';
|
||||
});
|
||||
});
|
||||
|
||||
// Restore ipcRenderer event listeners for real-time updates
|
||||
ipcRenderer.on("countdown-update", (event, seconds) => {
|
||||
updateCountdown(seconds);
|
||||
});
|
||||
|
||||
ipcRenderer.on("screenshot-taken", (event, screenshotPath) => {
|
||||
showNotification("Screenshot taken successfully!");
|
||||
addScreenshotToList(screenshotPath);
|
||||
});
|
||||
|
||||
ipcRenderer.on("screenshot-analysis", (event, data) => {
|
||||
updateScreenshotAnalysis(data.screenshotPath, data.analysis);
|
||||
});
|
||||
|
||||
ipcRenderer.on("screenshot-error", (event, error) => {
|
||||
showNotification(`Error: ${error}`, "error");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
185
src/index.js
Normal file
185
src/index.js
Normal file
@@ -0,0 +1,185 @@
|
||||
const { app, BrowserWindow, ipcMain } = require("electron");
|
||||
const path = require("path");
|
||||
const screenshot = require("screenshot-desktop");
|
||||
const fs = require("fs");
|
||||
const os = require("os");
|
||||
const { spawn, exec } = require("child_process");
|
||||
|
||||
const appName = require("../package.json").name;
|
||||
|
||||
const screenshotsDir = path.join(
|
||||
os.homedir(),
|
||||
".cache",
|
||||
appName,
|
||||
"screenshots"
|
||||
);
|
||||
if (!fs.existsSync(screenshotsDir)) {
|
||||
fs.mkdirSync(screenshotsDir, { recursive: true });
|
||||
}
|
||||
|
||||
const logicDir = path.join(__dirname, "logic");
|
||||
const venvDir = path.join(logicDir, "venv");
|
||||
const pythonPath = path.join(venvDir, "bin", "python");
|
||||
const pipPath = path.join(venvDir, "bin", "pip");
|
||||
|
||||
async function setupPythonEnv() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (fs.existsSync(venvDir)) {
|
||||
console.log("Python virtual environment already exists");
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Creating Python virtual environment...");
|
||||
const python = process.platform === "win32" ? "python" : "python3";
|
||||
|
||||
exec(`${python} -m venv ${venvDir}`, (error) => {
|
||||
if (error) {
|
||||
console.error("Error creating virtual environment:", error);
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Installing Python dependencies...");
|
||||
exec(
|
||||
`${pipPath} install -r ${path.join(logicDir, "requirements.txt")}`,
|
||||
(error) => {
|
||||
if (error) {
|
||||
console.error("Error installing dependencies:", error);
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
console.log("Python environment setup complete");
|
||||
resolve();
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
let mainWindow;
|
||||
let countdownInterval;
|
||||
const SCREENSHOT_INTERVAL = 30 * 1000;
|
||||
|
||||
function createWindow() {
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
webPreferences: {
|
||||
nodeIntegration: true,
|
||||
contextIsolation: false,
|
||||
},
|
||||
});
|
||||
|
||||
mainWindow.loadFile("src/index.html");
|
||||
}
|
||||
|
||||
async function takeScreenshot() {
|
||||
try {
|
||||
const timestamp = new Date().toISOString().replace(/[:.]/g, "-");
|
||||
const screenshotPath = path.join(
|
||||
screenshotsDir,
|
||||
`screenshot-${timestamp}.png`
|
||||
);
|
||||
|
||||
await screenshot({ filename: screenshotPath });
|
||||
|
||||
mainWindow.webContents.send("screenshot-taken", screenshotPath);
|
||||
|
||||
const pythonScript = path.join(logicDir, "src/main.py");
|
||||
const prohibitedPath = path.join(logicDir, "src/data", "prohibited.csv");
|
||||
|
||||
const pythonProcess = spawn(pythonPath, [
|
||||
pythonScript,
|
||||
"--single",
|
||||
screenshotPath,
|
||||
"--prohibited",
|
||||
prohibitedPath,
|
||||
"--role",
|
||||
"developer",
|
||||
"--model",
|
||||
"gemini",
|
||||
]);
|
||||
|
||||
let outputData = "";
|
||||
|
||||
pythonProcess.stdout.on("data", (data) => {
|
||||
outputData += data.toString();
|
||||
});
|
||||
|
||||
pythonProcess.stderr.on("data", (data) => {
|
||||
console.error(`Python script error: ${data}`);
|
||||
mainWindow.webContents.send("screenshot-error", data.toString());
|
||||
});
|
||||
|
||||
pythonProcess.on("close", (code) => {
|
||||
if (code === 0) {
|
||||
try {
|
||||
const jsonResponse = JSON.parse(outputData);
|
||||
mainWindow.webContents.send("screenshot-analysis", {
|
||||
screenshotPath,
|
||||
analysis: jsonResponse,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Error parsing Python script output:", error);
|
||||
mainWindow.webContents.send(
|
||||
"screenshot-error",
|
||||
"Invalid JSON response from analysis"
|
||||
);
|
||||
}
|
||||
} else {
|
||||
mainWindow.webContents.send(
|
||||
"screenshot-error",
|
||||
`Python script exited with code ${code}`
|
||||
);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Screenshot error:", error);
|
||||
mainWindow.webContents.send("screenshot-error", error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function startCountdown() {
|
||||
let timeLeft = SCREENSHOT_INTERVAL / 1000;
|
||||
|
||||
countdownInterval = setInterval(() => {
|
||||
timeLeft--;
|
||||
|
||||
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||
mainWindow.webContents.send("countdown-update", timeLeft);
|
||||
}
|
||||
|
||||
if (timeLeft <= 0) {
|
||||
takeScreenshot();
|
||||
timeLeft = SCREENSHOT_INTERVAL / 1000;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
app.whenReady().then(async () => {
|
||||
try {
|
||||
await setupPythonEnv();
|
||||
|
||||
createWindow();
|
||||
|
||||
startCountdown();
|
||||
takeScreenshot();
|
||||
|
||||
app.on("activate", () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Failed to setup Python environment:", error);
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
app.on("window-all-closed", () => {
|
||||
if (process.platform !== "darwin") {
|
||||
clearInterval(countdownInterval);
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
1
src/logic
Submodule
1
src/logic
Submodule
Submodule src/logic added at 8f656db8d9
2
src/preload.js
Normal file
2
src/preload.js
Normal file
@@ -0,0 +1,2 @@
|
||||
// See the Electron documentation for details on how to use preload scripts:
|
||||
// https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts
|
||||
Reference in New Issue
Block a user