Hugging Face's logo

Spaces:
victor
/
models-inference
Running

App Files Community
models-inference
File size: 3,836 Bytes 
aef4452
 
c13da55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>Models inference</title>

    <script src="https://cdn.tailwindcss.com"></script>

  <body>

    
  <div class="container mx-auto min-h-screen border-x px-12">
    <nav class="flex flex-none items-center gap-4 overflow-x-auto py-12">
      <div class="mr-5">Tasks</div>

      <div class="rounded-xl bg-black py-2 px-4 text-white">Summarization</div>
      <div class="rounded-xl bg-gray-100 py-2 px-4 text-black">Translation</div>
      <div class="rounded-xl bg-gray-100 py-2 px-4 text-black">Text Classification</div>
      <div class="rounded-xl bg-gray-100 py-2 px-4 text-black ml-auto">View all tasks</div>
    </nav>

    <form class="mb-12 flex flex-col">
      <textarea name="" id="" cols="30" rows="3" class="mb-4 w-full rounded-lg border border-gray-100 p-3" placeholder="Type here"></textarea>
      <button class="self-start rounded-xl bg-blue-600 bg-gradient-to-br py-2 px-4 text-white">Submit</button>
    </form>

    <div class="grid grid-cols-3 gap-3">
      <div class="h-[300px] rounded-lg border border-gray-200/70 bg-white shadow-sm outline-gray-100">
        <div class="flex justify-between items-center border-b py-2.5 px-4">
          <h2 class="font-mono text-sm">facebook/bart-large-cnn</h2>
          <p class="px- rounded bg-gray-100 px-1 text-sm">144 sec</p>
        </div>
        <p class="p-4 text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing azeelit. Dolorum quidem magnam odio. Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur molestias ut officiis.</p>
      </div>
      <div class="h-[300px] rounded-lg border border-gray-200/70 bg-white shadow-sm outline-gray-100">
        <div class="flex justify-between items-center border-b py-2.5 px-4">
          <h2 class="font-mono text-sm">philschmid/bart-large-cnn-samsum</h2>
          <p class="px- rounded bg-gray-100 px-1 text-sm">144 sec</p>
        </div>
        <p class="p-4 text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing azeelit. Dolorum quidem magnam odio.</p>
      </div>
      <div class="h-[300px] rounded-lg border border-gray-200/70 bg-white shadow-sm outline-gray-100">
        <div class="flex justify-between items-center border-b py-2.5 px-4">
          <h2 class="font-mono text-sm">/sshleifer/distilbart-cnn-12-6</h2>
          <p class="px- rounded bg-gray-100 px-1 text-sm">144 sec</p>
        </div>
        <p class="p-4 text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing azeelit. Dolorum quidem magnam odio. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit optio modi possimus sed mollitia tenetur doloribus consectetur quos tempore aperiam, cupiditate molestiae consequatur debitis qui tempora deleniti ut perspiciatis eos deserunt minima illum dolore fugiat molestias ab. Amet enim porro ut! Numquam, suscipit consectetur.</p>
      </div>
      <div class="h-[300px] rounded-lg border border-gray-200/70 bg-white shadow-sm outline-gray-100">
        <div class="flex justify-between items-center border-b py-2.5 px-4">
          <h2 class="font-mono text-sm">csebuetnlp/mT5_multilingual_XLSum </h2>
          <p class="px- rounded bg-gray-100 px-1 text-sm">144 sec</p>
        </div>
        <p class="p-4 text-gray-500">Lorem ipsum dolor sit amet consectetur adipisicing azeelit. Dolorum quidem magnam odio. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit optio modi possimus sed mollitia tenetur doloribus consectetur quos tempore aperiam, cupiditate molestiae consequatur debitis qui tempora deleniti ut perspiciatis eos deserunt minima illum dolore fugiat molestias ab. Amet enim porro ut! Numquam, suscipit consectetur.</p>
      </div>
    </div>
  </div>
</div>

  </body>
</html>