Spaces:
Running
Running
File size: 5,458 Bytes
c68efcc 84aedaf c69ce84 9644425 66e0c05 84aedaf 66e0c05 26c355d 9644425 26c355d 9644425 84aedaf 902bb5e 84aedaf 9644425 26c355d 9644425 84aedaf 902bb5e 84aedaf 9644425 26c355d 9644425 84aedaf 902bb5e 84aedaf 9644425 902bb5e 9644425 902bb5e 9644425 26c355d 9644425 66e0c05 |
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 129 130 131 132 133 134 135 136 137 138 139 |
import { PageContainer, Heading, Button } from '@ifrc-go/ui';
import { useNavigate } from 'react-router-dom';
import { useFilterContext } from '../hooks/useFilterContext';
import styles from './HelpPage.module.css';
export default function HelpPage() {
const navigate = useNavigate();
const { setShowReferenceExamples } = useFilterContext();
const handleUploadNow = () => {
navigate('/upload');
};
const handleSeeExamples = () => {
setShowReferenceExamples(true);
navigate('/explore');
};
const handleViewVlmDetails = () => {
navigate('/analytics?view=crisis_maps');
};
return (
<PageContainer className="py-10">
<div className={styles.helpContainer}>
<div className="space-y-8">
<div className={styles.helpSection}>
<div className={styles.sectionHeader}>
<Heading level={3} className={styles.sectionTitle}>Introduction</Heading>
</div>
<div className={styles.sectionContent}>
In collaboration with the IFRC, PromptAid Vision is a tool that generates textual descriptions of crisis maps/crisis drone images utiliing Visual language models.
This prototype is for collecting data for the fine-tuning of our own models. We aim to utilize AI tools to support national societies with rapid decision making during
emergencies.
</div>
<div className={styles.buttonContainer}>
<Button
name="upload-now"
variant="secondary"
onClick={handleUploadNow}
>
Upload now →
</Button>
</div>
</div>
<div className={styles.helpSection}>
<div className={styles.sectionHeader}>
<Heading level={3} className={styles.sectionTitle}>Guidelines</Heading>
</div>
<div className={styles.sectionContent}>
To make the process smoother, please follow the guidelines below:
<ul className={styles.guidelinesList}>
<li>Avoid uploading images that are not crisis maps/crisis drone images.</li>
<li>Confirm the image details prior to modifying the description.</li>
<li>Before the modification, please read the description generated and provide a rating via the rating sliders.</li>
<li>Click the "Submit" button to save the description.</li>
</ul>
</div>
<div className={styles.buttonContainer}>
<Button
name="see-examples"
variant="secondary"
onClick={handleSeeExamples}
>
See examples →
</Button>
</div>
</div>
<div className={styles.helpSection}>
<div className={styles.sectionHeader}>
<Heading level={3} className={styles.sectionTitle}>VLMs</Heading>
</div>
<div className={styles.sectionContent}>
PromptAid Vision uses a variety of Visual Language Models (VLMs). A random VLM is selected for each upload. Therefore feel free to delete
and reupload. You can view performance details here:
</div>
<div className={styles.buttonContainer}>
<Button
name="view-vlm-details"
variant="secondary"
onClick={handleViewVlmDetails}
>
View VLM details →
</Button>
</div>
</div>
<div className={styles.helpSection}>
<div className={styles.sectionHeader}>
<Heading level={3} className={styles.sectionTitle}>Dataset</Heading>
</div>
<div className={styles.sectionContent}>
All users are able to export the dataset. You could apply filters when exporting, and it have the option to organize based on model fine-tuning formats.
</div>
<div className={styles.buttonContainer}>
<Button
name="export-dataset"
variant="secondary"
onClick={() => {
setShowReferenceExamples(false);
navigate('/explore');
setTimeout(() => {
const exportButton = document.querySelector('[name="export-dataset"]') as HTMLButtonElement;
if (exportButton) {
exportButton.click();
}
}, 100);
}}
>
Export dataset →
</Button>
</div>
</div>
<div className={styles.helpSection}>
<div className={styles.sectionHeader}>
<Heading level={3} className={styles.sectionTitle}>Contact us</Heading>
</div>
<div className={styles.sectionContent}>
Need help or have questions about PromptAid Vision? Our team is here to support you.
</div>
<div className={styles.buttonContainer}>
<Button
name="contact-support"
variant="secondary"
disabled={true}
>
Get in touch →
</Button>
</div>
</div>
</div>
</div>
</PageContainer>
);
}
|