File size: 5,017 Bytes
e26e09e
2c703b1
 
e26e09e
 
2c703b1
 
e26e09e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2c703b1
 
e26e09e
 
2c703b1
 
e26e09e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1fdedc3
e26e09e
 
 
 
 
8c3dfb0
 
 
 
 
 
 
 
 
e26e09e
 
 
 
 
 
 
 
 
 
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
title_markdown = """
<div style="display: flex; justify-content: left; align-items: center; text-align: left; background: linear-gradient(45deg, rgba(195, 253, 245, 0.8), rgba(255, 0, 80, 0.3)); border-radius: 10px; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1);">  <a href="https://mammoth-vl.github.io/" style="margin-right: 20px; text-decoration: none; display: flex; align-items: center;">
    <img src="https://i.postimg.cc/sx6yL5ff/mammoth-vl.png" alt="MAmmoTH-VL" style="max-width: 80px; height: auto; border-radius: 10px;">
  </a>
  <div>
    <h2 ><a href="https://mammoth-vl.github.io/">MAmmoTH-VL Chat</a> </h2>
    <h5 style="margin: 0;"><a href="https://huggingface.co/MMSFT/MAmmoTH-VL-8B">Model</a> | <a href="https://github.com/MAmmoTH-VL/MAmmoTH-VL">Code</a> | <a href="https://huggingface.co/datasets/MMSFT/MAmmoTH-VL-12M">Dataset</a> | <a href="https://mammoth-vl.github.io/">Homepage</a></h5>
  </div>
</div>
"""

html_header = """
<style>
/* Existing Styles for Larger Screens */
.header-container {
  display: flex;
  justify-content: left;
  align-items: center;
  text-align: left;
  background: linear-gradient(45deg, rgba(195, 253, 245, 1), rgba(255, 0, 80, 0.3));
  border-radius: 10px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1);
  padding: 10px 20px; /* Added padding */
}

.header-container img {
  max-width: 80px;
  height: auto;
  border-radius: 10px;
}

.header-container a {
  color: black; /* Ensure text color is always black */
  text-decoration: none;
}

/* Responsive adjustments for screens less than 768px wide */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 15px; /* Adjust padding for smaller screens */
  }

  .header-container img {
    max-width: 60px; /* Adjust image size for smaller screens */
  }

  .header-container h2, .header-container h5 {
  color: black; /* Ensure text color is always black */
  text-decoration: none;
    text-align: center; /* Center text on small screens */
    margin-top: 5px; /* Add top margin for better spacing after stacking */
  }

  .header-container h2 {
  color: black; /* Ensure text color is always black */
  text-decoration: none;
    font-size: 16px; /* Smaller font size for the title on mobile */
  }

  .header-container h5 {
  color: black; /* Ensure text color is always black */
  text-decoration: none;
    font-size: 12px; /* Smaller font size for the subtitle on mobile */
  }

  .header-container a {
  color: black; /* Ensure text color is always black */
  text-decoration: none;
  }
}
</style>

<div class="header-container">
  <a href="https://mammoth-vl.github.io/" style="margin-right: 20px; text-decoration: none; display: flex; align-items: center;">
    <img src="https://i.postimg.cc/sx6yL5ff/mammoth-vl.png" alt="MAmmoTH-VL">
  </a>
  <div>
    <h2><a href="https://mammoth-vl.github.io/">MAmmoTH-VL:Eliciting Multimodal Reasoning with Instruction Tuning at Scale</a></h2>
    <h5><a href="https://github.com/MAmmoTH-VL/MAmmoTH-VL">Code</a> | <a href="https://huggingface.co/MMSFT/MAmmoTH-VL-8B">Model</a> | <a href="https://huggingface.co/datasets/MMSFT/MAmmoTH-VL-12M">DataSet</a> | <a href="https://mammoth-vl.github.io/">Homepage</a></h5>
  </div>
</div>
"""

block_css = """
#buttons button {
    min-width: min(120px,100%);
}
"""

tos_markdown = """
## Terms of use
By using this service, users are required to agree to the following terms:
The service is a research preview intended for non-commercial use only. It only provides limited safety measures and may generate offensive content. It must not be used for any illegal, harmful, violent, racist, or sexual purposes. The service may collect user dialogue data for future research.

We deploy our model backend with SGLang. However, there could be congestion during the serving process, leading to delayed responses. If you encounter any issues with the webpage, kindly refresh it.
"""


learn_more_markdown = """
## License
The service is a research preview and is subject to the [License](https://huggingface.co/Qwen/Qwen2-7B-Instruct/blob/main/LICENSE) of Qwen2, the [License](https://github.com/LLaVA-VL/LLaVA-NeXT/blob/main/LICENSE) of LLaVA-NEXT, and the [Terms of Use](https://openai.com/policies/terms-of-use) governing the data generated by OpenAI. Users are required to strictly adhere to the terms outlined in these licenses. Please contact us if you identify any potential violations.
"""

bibtext = """
## Citation
```
@article{guo2024mammothvlelicitingmultimodalreasoning,
      title={MAmmoTH-VL: Eliciting Multimodal Reasoning with Instruction Tuning at Scale}, 
      author={Jarvis Guo and Tuney Zheng and Yuelin Bai and Bo Li and Yubo Wang and King Zhu and Yizhi Li and Graham Neubig and Wenhu Chen and Xiang Yue},
      year={2024},
      eprint={2412.05237},
      archivePrefix={arXiv},
      primaryClass={cs.CL},
      url={https://arxiv.org/abs/2412.05237}, 
}
```
"""

block_css = """

#buttons button {
    min-width: min(120px,100%);
}

"""