Hugging Face's logo

Spaces:
lalalic
/
chattts
Running

App Files Community
chattts
File size: 2,218 Bytes 
01e655b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
import { render } from "preact";
import { html, create, styled } from "./misc.mjs";

import { pages } from "./pages.mjs";

const useStore = create((set, get) => ({
  page: Object.keys(pages).includes(location.hash.slice(1))
    ? location.hash.slice(1)
    : Object.keys(pages)[0],
  setPage: (page) => {
    set({ page });
    location.hash = page;
  },
}));

const NotFound = () => html`<div>Not Found</div>`;

const Content = () => {
  const { page } = useStore();
  const Page = pages[page];
  return Page ? html`<${Page} />` : html`<${NotFound} />`;
};

const NavButton = styled.button`
  background-color: transparent;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid transparent;

  &:hover {
    background-color: #444;
  }

  &.--active {
    border-bottom: 1px solid blue;
  }
`;

const HeaderNav = styled.nav`
  display: flex;
  padding: 4px 8px;
  background-color: #333;

  gap: 8px;

  user-select: none;

  .nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-title {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .divider {
    flex: 1;
  }
`;

const PageNav = () => {
  const { setPage, page: current } = useStore();
  return html`
    <${HeaderNav}>
      <div class="nav-icon">🗣️</div>
      <div class="nav-title">ChatTTS Forge Playground</div>
      ${Object.keys(pages).map(
        (page) =>
          html`
            <${NavButton}
              onClick=${() => setPage(page)}
              className=${current === page ? "--active" : ""}
            >
              ${page}
            <//>
          `
      )}
      <div class="divider"></div>
      <${NavButton}
        onClick=${() => {
          window.open("https://github.com/lenML/ChatTTS-Forge", "_blank");
        }}
      >
        github
      <//>
    <//>
  `;
};

const AppContent = styled.div`
  padding: 8px;
  flex: 1;
  overflow: auto;
`;

const App = () => {
  const { page } = useStore();
  return html`
    <${PageNav} />
    <${AppContent} className="pg-scrollbar">
      <${Content} />
    <//>
  `;
};

render(html`<${App} />`, document.getElementById("app"));