Hugging Face's logo

Spaces:
ameerazam08
/
neural-network-playground
Running

App Files Community
neural-network-playground
File size: 2,926 Bytes 
a895648
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
/* Enhanced dragging styles for the neural network playground */

/* Ensure canvas nodes have proper cursor styles */
.canvas-node {
    cursor: grab !important;
    /* Ensure proper z-indexing */
    z-index: 10;
    /* Smooth transitions for dragging effects */
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s;
}

/* Active dragging state */
.canvas-node.dragging {
    cursor: grabbing !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    /* Add a slight scale effect */
    transform: scale(1.05) !important;
    /* Make sure dragged node is on top */
    z-index: 1000 !important;
    /* Don't transition position while dragging */
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s !important;
}

/* Improve the connection lines */
.connection {
    z-index: 5;
    height: 3px;
    /* Add glow effect */
    box-shadow: 0 0 8px rgba(52, 152, 219, 0.5);
}

/* Make node controls more visible on hover */
.node-controls {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.canvas-node:hover .node-controls {
    opacity: 1;
}

/* Ensure node ports are visible and properly clickable */
.node-port {
    cursor: crosshair;
    z-index: 20;
    width: 14px;
    height: 14px;
}

/* Make the body grab cursor apply while dragging in case cursor leaves the element */
body.node-dragging {
    cursor: grabbing !important;
}

/* Styles for the fixed drag-drop functionality */

/* Improve node dragging */
.node-dragging {
    cursor: grabbing !important;
}

.canvas-node {
    position: absolute;
    z-index: 10;
    transition: box-shadow 0.2s ease-in-out;
}

.canvas-node.dragging {
    cursor: grabbing;
    z-index: 1000 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Connection styles */
.connection {
    position: absolute;
    height: 2px;
    background-color: #3498db;
    transform-origin: left center;
    pointer-events: none;
    z-index: 5;
}

.connection:after {
    content: '';
    position: absolute;
    right: -5px;
    top: -3px;
    width: 8px;
    height: 8px;
    background-color: #3498db;
    border-radius: 50%;
}

.temp-connection {
    background-color: #95a5a6;
    opacity: 0.7;
    z-index: 4;
}

.temp-connection:after {
    background-color: #95a5a6;
}

/* Improved port styles */
.node-port {
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: #3498db;
    border-radius: 50%;
    z-index: 20;
    border: 2px solid white;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.node-port:hover {
    transform: scale(1.2);
    background-color: #2980b9;
}

.port-in {
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
}

.port-out {
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
}

.port-in:hover, .port-out:hover {
    transform: translateY(-50%) scale(1.2);
}