+ Run any HuggingFace model on your data, no code
+
+
+
+ {/*HuggingFace inference*/}
+
+
+ Run HuggingFace inference over your files
+
+ You can select any model on the HuggingFace Hub. Then you can run that model over your files, with no code, no infrastructure and all without ever leaving this GUI.
+ The below models are sorted by number of downloads on HuggingFace Hub.
+
+
+ {/* HuggingFace model name input */}
+ (
+
+ )}
+ onInputChange={(event, newInputValue) => {
+ setSelectedHuggingFaceModelName(newInputValue);
+ }}
+ />
+
+
+ {/*access*/}
+
+
+ Security Level
+
+
+ Choose your endpoint's level of privacy.
+
+
+ } label="Protected" />
+
+ A Protected Endpoint is available from the Internet, secured with TLS/SSL and requires a valid Clowder API Token for authentication.
+
+ } label="Public" />
+
+ A Public Endpoint is available from the internet, secured with TLS/SSL and requires NO authentication.
+
+
+
+
+
+
+
+ {/* */}
+
+ {/* TODO: possibly implement the Stepper box for iterative form filling... */}
+
+
+ {/*
+
+
+
+ Basic Information
+
+
+ A dataset is a container for files, folders and metadata.
+
+
+
+
+
+
+
+
+
+ Required Metadata
+
+ {metadataDefinitionList.length > 0 ? (
+
+ This metadata is required when creating a new dataset.
+
+ ) : (
+ No metadata required.
+ )}
+
+
+
+
+
+ <>
+
+
+
+
+
+
+
+ */}
+
+
+
+ );
+};
+
+const IntroMessage = () => {
+ return (
+ <>
+
+ Create a new Extractor
+
+
+ Why Extractors?
+
+
+ At its heart, extractors run a Python function over every file in a dataset. They can run at the click of a button in Clowder web UI or like an event listener every time a new file is uploaded.
+
+ Need to process a lot of files? This is great for ML inference and data pre-processing. These examples work out of the box or you can swap in your own model!
+
+ Have daily data dumps? Extractors are perfect for event-driven actions. They will run code every time a file is uploaded. Uploads themselves can be automated via PyClowder for a totally hands-free data pipeline.
+
+ {/*
+ Clowder's rich scientific data ecosystem
+
+
+ Benefit from the rich featureset & full extensibility of Clowder:
+
+
+
Instead of files on your laptop, use Clowder to add collaborators & share datasets via the browser.
+
Benefiting scientists, we work with (~)every filetype and have rich extensibility for any job you need to run.
+
*/}
+
+ )
+}
\ No newline at end of file
diff --git a/frontend/src/components/listeners/CreateListenerModal.tsx b/frontend/src/components/listeners/CreateListenerModal.tsx
new file mode 100644
index 000000000..5a78fd0f1
--- /dev/null
+++ b/frontend/src/components/listeners/CreateListenerModal.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+
+import { Box, Button } from "@mui/material";
+
+import Form from "@rjsf/material-ui";
+import datasetSchema from "../../schema/datasetSchema.json";
+import { FormProps } from "@rjsf/core";
+import { ClowderRjsfTextWidget } from "../styledComponents/ClowderRjsfTextWidget";
+import { ClowderRjsfSelectWidget } from "../styledComponents/ClowderRjsfSelectWidget";
+import { ClowderRjsfErrorList } from "../styledComponents/ClowderRjsfErrorList";
+import { ClowderRjsfTextAreaWidget } from "../styledComponents/ClowderRjsfTextAreaWidget";
+
+type CreateDatasetModalProps = {
+ onSave: any;
+};
+
+const widgets = {
+ TextWidget: ClowderRjsfTextWidget,
+ TextAreaWidget: ClowderRjsfTextAreaWidget,
+ SelectWidget: ClowderRjsfSelectWidget,
+};
+
+export const CreateListenerModal: React.FC = (
+ props: CreateDatasetModalProps
+) => {
+ const { onSave } = props;
+
+ return (
+
+ );
+};
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
index 81895c7a8..71777374b 100644
--- a/frontend/src/routes.tsx
+++ b/frontend/src/routes.tsx
@@ -12,6 +12,7 @@ import { CreateMetadataDefinitionPage } from "./components/metadata/CreateMetada
import { Dataset as DatasetComponent } from "./components/datasets/Dataset";
import { File as FileComponent } from "./components/files/File";
import { CreateDataset } from "./components/datasets/CreateDataset";
+import { CreateListener } from "./components/listeners/CreateListener";
import { Groups as GroupListComponent } from "./components/groups/Groups";
import { Group as GroupComponent } from "./components/groups/Group";
@@ -190,6 +191,14 @@ export const AppRoutes = (): JSX.Element => {
}
/>
+
+
+
+ }
+ />
+ PyTorch example
+ 
+ TensorFlow Keras example
+ 
+ Huggingface Transformers example
+