Spaces:

capta1n
/

testtest

Running

App Files Files Community

capta1n commited on Apr 20, 2025

Commit

c2015ee

verified ·

1 Parent(s): 63d9fd4

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +401 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Testtest
-emoji: 🚀
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: testtest
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,401 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI SDL Digital Twin Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* 新增科技感数字人样式 */
+        .digital-human {
+            position: relative;
+            width: 160px;
+            height: 160px;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #00d1ff, #0061ff);
+            box-shadow: 0 0 30px rgba(0, 209, 255, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .digital-human::before {
+            content: "";
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: conic-gradient(
+                transparent,
+                transparent,
+                transparent,
+                #00f2ff
+            );
+            animation: rotate 4s linear infinite;
+        }
+        .digital-human::after {
+            content: "";
+            position: absolute;
+            inset: 4px;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #00d1ff, #0061ff);
+        }
+        .digital-human-core {
+            position: relative;
+            z-index: 10;
+            width: 140px;
+            height: 140px;
+            border-radius: 50%;
+            background: rgba(0, 0, 50, 0.7);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            text-align: center;
+            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
+        }
+        .digital-human-eyes {
+            display: flex;
+            gap: 15px;
+            margin-bottom: 10px;
+        }
+        .digital-human-eye {
+            width: 20px;
+            height: 20px;
+            background: white;
+            border-radius: 50%;
+            position: relative;
+            overflow: hidden;
+        }
+        .digital-human-eye::after {
+            content: "";
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 10px;
+            height: 10px;
+            background: #00d1ff;
+            border-radius: 50%;
+            box-shadow: 0 0 10px #00d1ff;
+            animation: blink 4s infinite;
+        }
+        .digital-human-mouth {
+            width: 40px;
+            height: 10px;
+            background: white;
+            border-radius: 5px;
+            position: relative;
+            overflow: hidden;
+        }
+        .digital-human-mouth::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: #ff2a6d;
+            border-radius: 5px;
+            transform: scaleX(0.8);
+            transform-origin: left;
+            animation: speak 2s infinite alternate;
+        }
+        .digital-human-halo {
+            position: absolute;
+            width: 180px;
+            height: 180px;
+            border-radius: 50%;
+            border: 2px solid rgba(0, 209, 255, 0.3);
+            animation: pulse 3s infinite;
+        }
+        .digital-human-halo:nth-child(2) {
+            width: 200px;
+            height: 200px;
+            animation-delay: 0.5s;
+        }
+        .digital-human-halo:nth-child(3) {
+            width: 220px;
+            height: 220px;
+            animation-delay: 1s;
+        }
+        @keyframes rotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @keyframes blink {
+            0%, 45%, 55%, 100% { transform: scale(1); }
+            50% { transform: scale(1, 0.1); }
+        }
+        @keyframes speak {
+            0%, 100% { transform: scaleX(0.8); }
+            50% { transform: scaleX(1.2); }
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); opacity: 1; }
+            100% { transform: scale(1.2); opacity: 0; }
+        }
+        /* 原有样式保持不变 */
+        @keyframes flow {
+            0% { stroke-dashoffset: 100; }
+            100% { stroke-dashoffset: 0; }
+        }
+        .flow-arrow {
+            stroke-dasharray: 10;
+            animation: flow 2s linear infinite;
+        }
+        .risk-high {
+            border-left: 4px solid #ef4444;
+        }
+        .risk-medium {
+            border-left: 4px solid #f59e0b;
+        }
+        .risk-low {
+            border-left: 4px solid #10b981;
+        }
+        .code-line-error {
+            position: relative;
+        }
+        .code-line-error::after {
+            content: "";
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: -2px;
+            height: 2px;
+            background: repeating-linear-gradient(45deg, #ef4444, #ef4444 2px, transparent 2px, transparent 4px);
+        }
+        .architecture-diagram {
+            width: 100%;
+            height: 400px;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.5rem;
+            overflow: auto;
+        }
+        .threat-model {
+            width: 100%;
+            height: 400px;
+            background-color: #f9fafb;
+            border-radius: 0.5rem;
+        }
+        .threat-node {
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .threat-node:hover {
+            filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
+        }
+        .request-flow {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .request-step {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .request-arrow {
+            width: 20px;
+            height: 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: #6b7280;
+        }
+        .request-box {
+            flex: 1;
+            padding: 1rem;
+            background-color: #f3f4f6;
+            border-radius: 0.5rem;
+            font-family: monospace;
+            white-space: pre-wrap;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800">
+    <!-- 只修改了数字人部分，其他部分保持不变 -->
+    <!-- ... 前面的header和stats部分保持不变 ... -->
+    <!-- Main Dashboard -->
+    <div class="flex-1 flex space-x-6">
+        <!-- SDL Process Visualization -->
+        <div class="flex-1 bg-white rounded-xl shadow-sm p-6 relative">
+            <h2 class="text-lg font-semibold mb-4">SDL Process Analysis</h2>
+            <div class="relative h-full" style="min-height: 500px;">
+                <!-- Circular SDL Process -->
+                <div class="absolute inset-0 flex items-center justify-center">
+                    <svg width="100%" height="100%" viewBox="0 0 600 600" class="max-w-xl mx-auto">
+                        <!-- Data Flow Arrows -->
+                        <path id="flow-1" d="M300,100 A200,200 0 0,1 500,300 L480,300 A180,180 0 0,0 300,120 Z" fill="none" stroke="#6366f1" stroke-width="2" class="flow-arrow" />
+                        <path id="flow-2" d="M500,300 A200,200 0 0,1 300,500 L300,480 A180,180 0 0,0 480,300 Z" fill="none" stroke="#6366f1" stroke-width="2" class="flow-arrow" />
+                        <path id="flow-3" d="M300,500 A200,200 0 0,1 100,300 L120,300 A180,180 0 0,0 300,480 Z" fill="none" stroke="#6366f1" stroke-width="2" class="flow-arrow" />
+                        <path id="flow-4" d="M100,300 A200,200 0 0,1 300,100 L300,120 A180,180 0 0,0 120,300 Z" fill="none" stroke="#6366f1" stroke-width="2" class="flow-arrow" />
+                        <!-- 科技感数字人 -->
+                        <foreignObject x="220" y="220" width="160" height="160">
+                            <div class="digital-human" xmlns="http://www.w3.org/1999/xhtml">
+                                <div class="digital-human-halo"></div>
+                                <div class="digital-human-halo"></div>
+                                <div class="digital-human-halo"></div>
+                                <div class="digital-human-core">
+                                    <div class="digital-human-eyes">
+                                        <div class="digital-human-eye"></div>
+                                        <div class="digital-human-eye"></div>
+                                    </div>
+                                    <div class="text-xs mb-1">AI SECURITY</div>
+                                    <div class="digital-human-mouth"></div>
+                                </div>
+                            </div>
+                        </foreignObject>
+                        <!-- Requirement Design Phase -->
+                        <g class="cursor-pointer" onclick="showPhaseDetails('requirement')">
+                            <circle cx="300" cy="100" r="60" fill="#f0fdf4" stroke="#4ade80" stroke-width="3" />
+                            <text x="300" y="100" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#15803d">Requirement</text>
+                            <text x="300" y="120" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#15803d">4 risks</text>
+                            <circle cx="300" cy="140" r="4" fill="#ef4444" class="animate-pulse" />
+                        </g>
+                        <!-- Code Change Phase -->
+                        <g class="cursor-pointer" onclick="showPhaseDetails('code')">
+                            <circle cx="500" cy="300" r="60" fill="#eff6ff" stroke="#60a5fa" stroke-width="3" />
+                            <text x="500" y="290" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#1d4ed8">Code</text>
+                            <text x="500" y="310" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#1d4ed8">6 risks</text>
+                            <circle cx="500" cy="330" r="4" fill="#ef4444" class="animate-pulse" />
+                        </g>
+                        <!-- Security Testing Phase -->
+                        <g class="cursor-pointer" onclick="showPhaseDetails('testing')">
+                            <circle cx="300" cy="500" r="60" fill="#fef2f2" stroke="#f87171" stroke-width="3" />
+                            <text x="300" y="490" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#b91c1c">Testing</text>
+                            <text x="300" y="510" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#b91c1c">3 risks</text>
+                            <circle cx="300" y="530" r="4" fill="#ef4444" class="animate-pulse" />
+                        </g>
+                        <!-- Release Phase -->
+                        <g class="cursor-pointer" onclick="showPhaseDetails('release')">
+                            <circle cx="100" cy="300" r="60" fill="#f5f3ff" stroke="#a78bfa" stroke-width="3" />
+                            <text x="100" y="290" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#6d28d9">Release</text>
+                            <text x="100" y="310" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#6d28d9">2 risks</text>
+                            <circle cx="100" y="330" r="4" fill="#ef4444" class="animate-pulse" />
+                        </g>
+                        <!-- Production Phase -->
+                        <g class="cursor-pointer" onclick="showPhaseDetails('production')">
+                            <circle cx="300" cy="300" r="180" fill="none" stroke="#fcd34d" stroke-width="3" stroke-dasharray="5,5" />
+                            <text x="300" y="240" text-anchor="middle" dominant-baseline="middle" font-size="14" font-weight="bold" fill="#92400e">Production</text>
+                            <text x="300" y="260" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#92400e">3 risks</text>
+                            <circle cx="300" y="280" r="4" fill="#ef4444" class="animate-pulse" />
+                        </g>
+                    </svg>
+                </div>
+            </div>
+            <!-- Analysis Log -->
+            <div class="mt-6 border-t pt-4">
+                <h3 class="text-sm font-semibold text-gray-500 mb-2">Real-time Analysis Log</h3>
+                <div class="bg-gray-50 rounded-lg p-3 h-40 overflow-y-auto text-sm space-y-2" id="analysis-log">
+                    <div class="text-green-600">✓ Completed analysis: Alipay National Subsidy Project requirements</div>
+                    <div class="text-green-600">✓ Completed analysis: Cloud Storage Optimization Project code review</div>
+                    <div class="text-blue-600">→ Analyzing: Payment Gateway API security testing</div>
+                    <div class="text-green-600">✓ Completed analysis: User Management System release check</div>
+                    <div class="text-blue-600">→ Analyzing: E-commerce Platform production monitoring</div>
+                    <div class="text-red-600">⚠ Found 2 high risks in Financial Reporting Module</div>
+                </div>
+            </div>
+        </div>
+        <!-- Risk Alerts -->
+        <div class="w-80 bg-white rounded-xl shadow-sm p-6 flex flex-col">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-lg font-semibold">Risk Alerts</h2>
+                <div class="text-sm text-gray-500" id="alert-count">5 new</div>
+            </div>
+            <div class="flex-1 overflow-y-auto space-y-3" id="risk-alerts">
+                <div class="p-3 rounded-lg risk-high cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('alipay-subsidy')">
+                    <div class="font-medium">Alipay National Subsidy</div>
+                    <div class="text-sm text-gray-600">Requirement, Code</div>
+                    <div class="text-xs mt-1">
+                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded">SQL Injection</span>
+                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Privilege Escalation</span>
+                    </div>
+                </div>
+                <div class="p-3 rounded-lg risk-medium cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('cloud-storage')">
+                    <div class="font-medium">Cloud Storage Optimization</div>
+                    <div class="text-sm text-gray-600">Code, Testing</div>
+                    <div class="text-xs mt-1">
+                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">XSS</span>
+                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Insecure Deserialization</span>
+                    </div>
+                </div>
+                <div class="p-3 rounded-lg risk-high cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('payment-gateway')">
+                    <div class="font-medium">Payment Gateway API</div>
+                    <div class="text-sm text-gray-600">Testing</div>
+                    <div class="text-xs mt-1">
+                        <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Broken Authentication</span>
+                    </div>
+                </div>
+                <div class="p-3 rounded-lg risk-low cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('user-management')">
+                    <div class="font-medium">User Management System</div>
+                    <div class="text-sm text-gray-600">Release</div>
+                    <div class="text-xs mt-1">
+                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Missing Security Headers</span>
+                    </div>
+                </div>
+                <div class="p-3 rounded-lg risk-medium cursor-pointer hover:bg-gray-50" onclick="showProjectDetails('ecommerce-platform')">
+                    <div class="font-medium">E-commerce Platform</div>
+                    <div class="text-sm text-gray-600">Production</div>
+                    <div class="text-xs mt-1">
+                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Suspicious Activity</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- ... 后面的modal和script部分保持不变 ... -->
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=capta1n/testtest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ 目标：创建一个拟人化的AI SDL产品，核心是体现出一个AI数字分身角色在企业SDL链路的每个环节都在持续进行安全分析，存在风险时会主动告警出某个项目在SDL链路中存在风险，无风险时会持续展示每个环节的安全分析报告。系统分为三大主模块分别是AI SDL数字分身工作大盘、风险项目告警、风险项目详情 AI SDL数字分身工作大盘功能需求：大盘中以游戏的形式呈现出一个AI SDL数字分身持续在SDL的5个链路上持续进行安全分析并不断产出风险项目和风险报告5个链路分别是需求设计、代码变更、安全测试、发布、线上运行。需求设计环节：AI SDL数字分身不断在对企业中的需求进行安全分析，发现存在风险的项目需求。代码变更环节：AI SDL数字分身不断在对企业中的代码进行安全评审，发现存在风险的项目代码。安全测试环节：AI SDL数字分身不断在对企业中的接口进行自动化安全测试，发现存在风险的项目接口地址。发布环节：AI SDL数字分身对发布环节的全部项目进行安全检查，发现存在风险的项目发布变更行为。线上运行环节：AI SDL数字分身对全部线上项目进行安全健康，发现存在漏洞或者入侵风险的项目。设计要求 AI SDL数字分身在中间，5个环节以环形布局排列，每个环节包含： ● 进度环：以持续分析中的动效展示分析结果，例发现4个风险和持续分析中的动效 ● 数据流动态：环形链路间用光效箭头显示数据流动向（如需求→代码→测试→发布→线上） ● 实时分析动态：动态更新展示数字人的分析动态，例完成分析支付宝国补项目、完成分析云存储优化项目代码分析 ● 实时数据看板：最上方展示全局统计数据（如"今日已分析*个需求发现*个风险"）风险项目告警 AI SDL数字分身在每个环节发现的风险，最终将信息聚合成"某个项目在某个环节存在某风险" 的形式产出告警（项目是唯一维度，如果一个项目在多个环节存在风险需聚合在一起），例支付宝国补项目在代码和需求环节存在越权和sql注入风险。项目详情告警出来的风险项目，点击进入详情页，将项目分为需求-代码-安全测试-发布-线上5个模块，每个模块都包含内容--安全分析结果，需要在内容上动态展示分析过程和同步展示风险对应的内容，因为安全分析是对内容进行分析最终产出安全分析结果。需求模块： ● 内容：展示项目对应的需求文档内容，包括技术架构图 ● 分析结果：产出威胁建模图、安全风险：包括业务场景-风险点-风险类型-整改建议代码模块： ● 内容：展示项目对应的全部代码内容 ● 分析结果：安全风险：由风险接口、代码漏洞名称、漏洞描述、存在漏洞的代码内容（点击可定位到代码内容）、修复建议安全测试： ● 内容：展示对应的风险接口以及每个风险接口对应的攻击payload和攻击结果 ● 分析结果：存在风险的接口、攻击payload请求、风险描述发布： ● 内容：展示在发布环节进行安全检查的内容，检查之前环节积累下来的风险是否修复 ● 分析结果：未修复的风险，在之前的每个环节发现但未修复的风险，例代码环节的越权风险未修复线上： ● 内容：展示发现的漏洞或者入侵事件风险 ● 分析结果：展示漏洞的修复情况设计要求 ● 实时告警：最右侧通过告警中心模块实时展示最新发现的风险项目，不同风险等级展示不同的颜色标记，点击之后进入项目详情 ● 在右上角增加风险项目功能，点击进入展示全部的风险项目，点击项目进入项目详情页。 ● 项目详情中 ○ 需求模块：1、技术架构图支持缩放/平移（集成mermaid.js） 2、威胁建模图采用交互式拓扑图（可点击节点查看风险详情） 3、风险内容高亮展示 ○ 代码模块：1、代码高亮显示（支持多种语言）2、漏洞代码行用红色波浪线标注，点击弹出修复建议浮层 3、支持展示多文件的代码内容结构 ○ 安全测试模块：1、接口攻击过程可视化（请求-响应链路图）2、Payload展示采用代码块样式并支持修复
2	+ 数字人的形态设计的更加有科技感些