File size: 2,688 Bytes
143e30d
 
 
 
3c2fc33
143e30d
 
 
 
 
 
 
 
 
 
 
 
 
 
c232cf6
 
 
 
 
 
143e30d
 
 
3c2fc33
 
143e30d
42f9580
f37fa23
12af5c4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f37fa23
12af5c4
 
 
 
 
 
 
f37fa23
7762f99
 
 
 
 
 
 
 
 
 
 
f37fa23
12af5c4
 
29b9e30
 
 
f37fa23
12af5c4
7762f99
f37fa23
42f9580
 
 
143e30d
 
 
 
 
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
import gradio as gr

from src.distilabel_dataset_generator.apps.faq import app as faq_app
from src.distilabel_dataset_generator.apps.sft import app as sft_app
from src.distilabel_dataset_generator.apps.textcat import app as textcat_app

theme = gr.themes.Monochrome(
    spacing_size="md",
    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui", "sans-serif"],
)

css = """
.main_ui_logged_out{opacity: 0.3; pointer-events: none}
.tabitem{border: 0px}
.group_padding{padding: .55em}
#space_model .wrap > label:last-child{opacity: 0.3; pointer-events:none}
#system_prompt_examples {
    color: black;
}
@media (prefers-color-scheme: dark) {
    #system_prompt_examples {
        color: white;
        background-color: black;
    }
}
"""

demo = gr.TabbedInterface(
    [textcat_app, sft_app, faq_app],
    ["Text Classification", "Supervised Fine-Tuning", "FAQ"],
    css=css,
    title="""
    <style>
        .header-container {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 20px 0;
        }
        .logo-container {
            position: absolute;
            left: 0;
            top: 0;
        }
        .title-container {
            text-align: center;
        }
        @media (max-width: 600px) {
            .header-container {
                flex-direction: column;
            }
            .logo-container {
                position: static;
                margin-bottom: 20px;
            }
        }
        button[role="tab"].selected,
        button[role="tab"][aria-selected="true"],
        button[role="tab"][data-tab-id][aria-selected="true"] {
            background-color: #000000;
            color: white;
            border: none;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease, color 0.3s ease;
        }
    </style>
    <div class="header-container">
        <div class="logo-container">
            <a href="https://github.com/argilla-io/distilabel" target="_blank" rel="noopener noreferrer">
                <img src="https://distilabel.argilla.io/latest/assets/distilabel-black.svg" alt="Distilabel Logo" style="width: 150px; height: auto;">
            </a>
        </div>
        <div class="title-container">
            <h1 style="margin: 0; font-size: 2em;">🧬 Synthetic Data Generator</h1>
            <p style="margin: 10px 0 0 0; color: #666; font-size: 1.1em;">Build datasets using natural language</p>
        </div>
    </div>
    """,
    theme=theme,
)

if __name__ == "__main__":
    demo.launch()