Hugging Face's logo

Spaces:
Deep-Fake
/
T4_Three_Ways
Running

App Files Community
T4_Three_Ways
File size: 7,596 Bytes
21d3e18
510a153
 
 
 
 
 
31c4015
21d3e18
 
510a153
 
 
21d3e18
31c4015
21d3e18
510a153
 
 
31c4015
510a153
21d3e18
510a153
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31c4015
510a153
 
 
 
 
 
 
 
31c4015
510a153
 
 
 
 
 
21d3e18
510a153
 
 
21d3e18
510a153
 
 
 
 
 
 
 
 
 
 
 
21d3e18
510a153
 
 
 
 
 
 
 
 
 
 
21d3e18
510a153
21d3e18
510a153
 
 
 
 
 
 
 
 
 
 
 
21d3e18
510a153
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
:root {
  --bg: #f5f5f7; --card: #ffffff; --text: #1d1d1f; --muted: #6e6e73; --faint: #86868b; --line: #e8e8ed;
  --fill: #e9e9ee; --accent: #0071e3;
  --S: #8e8e93; --P: #af52de; --G: #34c759; --fake: #ff3b30; --real: #248a3d;
  --hl: rgba(255, 204, 0, .30); --shadow: 0 1px 1px rgba(0,0,0,.03), 0 8px 28px rgba(0,0,0,.06);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --card: #1c1c1e; --text: #f5f5f7; --muted: #a1a1a6; --faint: #8e8e93; --line: #2c2c2e;
    --fill: #2c2c2e; --accent: #0a84ff; --P: #bf5af2; --G: #30d158; --fake: #ff453a; --real: #30d158;
    --hl: rgba(255, 214, 10, .24); --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --card: #1c1c1e; --text: #f5f5f7; --muted: #a1a1a6; --faint: #8e8e93; --line: #2c2c2e;
  --fill: #2c2c2e; --accent: #0a84ff; --P: #bf5af2; --G: #30d158; --fake: #ff453a; --real: #30d158;
  --hl: rgba(255, 214, 10, .24); --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font); letter-spacing: -.01em; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 78%, transparent);
       backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
       border-bottom: 1px solid var(--line); }
.bar-inner { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; flex-wrap: wrap;
             align-items: center; justify-content: space-between; gap: 10px 24px; }
.brand h1 { font: 600 19px/1.2 var(--display); letter-spacing: -.02em; margin: 0; }
.brand p { margin: 1px 0 0; color: var(--muted); font-size: 13px; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

.segmented { display: inline-flex; flex-wrap: wrap; background: var(--fill); border-radius: 9px; padding: 2px; gap: 2px; }
.segmented button { border: 0; background: transparent; color: var(--text); font: 500 13px var(--font);
                    padding: 5px 12px; border-radius: 7px; cursor: pointer; transition: background .15s; }
.segmented button.on { background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
.segmented .count { color: var(--faint); margin-left: 5px; font-weight: 400; font-variant-numeric: tabular-nums; }

.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch .track { width: 38px; height: 23px; border-radius: 12px; background: var(--fill); position: relative; transition: background .2s; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
                        background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + .track { background: var(--G); }
.switch input:checked + .track::after { transform: translateX(15px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* intro */
.legend { max-width: 1180px; margin: 28px auto 4px; padding: 0 24px; display: grid; gap: 6px;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); color: var(--muted); font-size: 13.5px; }
.legend b { color: var(--text); font-weight: 600; margin-right: 6px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; flex: none; }
.dot.S { background: var(--S); } .dot.P { background: var(--P); } .dot.G { background: var(--G); }

/* cards */
main { max-width: 1180px; margin: 0 auto; padding: 20px 24px 80px; display: grid; gap: 28px; }
.clip { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }

.top { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; padding: 24px 28px 0; }
.media video { width: 100%; aspect-ratio: 1; border-radius: 14px; background: #000; display: block; object-fit: contain; }
.info h2 { font: 600 24px/1.15 var(--display); letter-spacing: -.025em; margin: 4px 0 6px; }
.info .meta { color: var(--muted); font-size: 14px; }
.info .meta .fake { color: var(--fake); font-weight: 500; } .info .meta .real { color: var(--real); font-weight: 500; }
.facts { margin: 16px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13.5px; }
.facts dt { color: var(--faint); }
.facts dd { margin: 0; }
.link { border: 0; background: none; color: var(--accent); font: 500 14px var(--font); padding: 0; margin-top: 18px; cursor: pointer; }
.link:hover { text-decoration: underline; }
.ref { margin-top: 12px; max-width: 240px; }
.ref video { width: 100%; border-radius: 12px; background: #000; display: block; }

.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 24px; border-top: 1px solid var(--line); }
.arm { padding: 20px 28px 26px; min-width: 0; }
.arm + .arm { border-left: 1px solid var(--line); }
.arm h3 { display: flex; align-items: center; font: 600 14px var(--font); margin: 0 0 14px; }
.arm h3 small { color: var(--faint); font-weight: 400; margin-left: 6px; }
.part { margin-bottom: 16px; }
.part:last-of-type { margin-bottom: 0; }
.part .tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 3px; }
.part p { margin: 0; }
.part p.real { color: var(--muted); }
.sent { border-radius: 4px; transition: background .15s; }
.sent.hl { background: var(--hl); }
.failed { color: var(--faint); font-size: 14px; margin: 0; }

/* details, off by default */
.detail { display: none; }
body.details .detail { display: block; }
.sub { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.sub .label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 4px; }
.sub ul { list-style: none; margin: 0; padding: 0; }
.sub li { padding: 3px 0; }
.sub li b { font-weight: 600; color: var(--faint); margin-right: 8px; font-variant-numeric: tabular-nums; }
.sub li.hl { color: var(--text); }
.sub li.kept::before { content: "✓"; color: var(--G); margin-right: 8px; }
.sub li.dropped { color: var(--faint); }
.sub li.dropped::before { content: "✕"; margin-right: 8px; }

/* sham */
.sham .found { list-style: none; margin: 8px 0 0; padding: 0; }
.sham .found li { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--fake) 10%, transparent);
                  color: var(--text); margin-bottom: 6px; }
.sham .found li.none { background: var(--fill); color: var(--muted); }
.sham .note { color: var(--muted); font-size: 13.5px; margin: 12px 0 0; }
.sham { padding-bottom: 26px; }

@media (max-width: 900px) {
  .top { grid-template-columns: 1fr; }
  .media { max-width: 420px; }
  .cols { grid-template-columns: 1fr; }
  .arm + .arm { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .bar-inner, .legend, main { padding-left: 16px; padding-right: 16px; }
  .top { padding: 18px 18px 0; } .arm { padding: 18px; }
  .clip { border-radius: 18px; }
}