diff --git a/README.md b/README.md index d1049f66..3d7ae706 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,6 @@ The project is structured as follows: - Update `URLInputsTab` as necessary - Be sure to read the `IMPORTANT` comment before editing the inputs - There are multiple paths in the render function depending on if your input is a `useMultipleInput`, `multiple`, etc. - if you change one, you will likely need to update all of them. - ...WIP? - Add the new task to `ModelDetailPage` in `getSampleInputs` and `getInputType` @@ -131,8 +130,6 @@ The project is structured as follows: - In the `makeOutput` function, add a new case statement for your new Output - Generally you will only need to pass through the `trialOutput` and `onBackClicked` but if you need to be able to re-run the trial on the same page (for example with Conversations) then you would also add a prop here for `runTrial`. -- ...to be continued - - Additional Notes: - To test the upload dashboard in storybook, open `useUploadInputControl` and: - Find the text `COMMENT THIS OUT BEFORE COMMITTING` and uncomment it. diff --git a/src/components/Experiment/QuickOutput/MultiInputPreview.js b/src/components/Experiment/QuickOutput/MultiInputPreview.js index b80147cf..ceb0cd73 100644 --- a/src/components/Experiment/QuickOutput/MultiInputPreview.js +++ b/src/components/Experiment/QuickOutput/MultiInputPreview.js @@ -5,6 +5,7 @@ import { ReactComponent as DocumentIcon } from "../../../resources/icons/icon-do import "./MultiInput.scss"; import { TaskInputTypes } from "../../../helpers/TaskInputTypes"; +import { QuickInputType } from "../QuickInput/quickInputType"; const defaultProps = { className: "multi-input-preview", @@ -19,11 +20,11 @@ export default function MultiInputPreview(givenProps) { const getInputs = (input) => { switch (input.inputType) { - case TaskInputTypes.Text: + case QuickInputType.Text: return (

{input.src}

); - case TaskInputTypes.Document: + case QuickInputType.Document: return ( ); - case TaskInputTypes.Image: + case QuickInputType.Image: return ( {input.description ); - case TaskInputTypes.Audio: - case TaskInputTypes.Csv: + case QuickInputType.Audio: + case QuickInputType.Csv: default: return (

Unable to display input

diff --git a/src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3D.scss b/src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3D.scss index d50bc08e..ce61c9f1 100644 --- a/src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3D.scss +++ b/src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3D.scss @@ -72,18 +72,20 @@ &-subtitle { @include body; border-bottom: 1px solid $smokeDarkest; - margin-bottom: 24px; padding-bottom: 16px; @include mobileWidth-lg { @include bodySmall; } } - &-help-text { - @include bodySmall; - font-size: 14px; - margin-bottom: 12px; - } + &-model-controls { + display: flex; + justify-content: center; + + img { + max-width: 300px; + } + } &-model { border: 1px solid $smokeDarkest; border-radius: 5px; diff --git a/src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3DOutput.js b/src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3DOutput.js index 947d6096..4a69ade0 100644 --- a/src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3DOutput.js +++ b/src/components/Experiment/QuickOutput/Outputs/ImageTo3D/ImageTo3DOutput.js @@ -12,6 +12,8 @@ import Rating from "../Classification/Rating"; import OutputDuration from "../_Common/components/OutputDuration"; import OBJComponent from "./OBJComponent"; +import directions from "../../../../../resources/img/3d-model-guide.png"; + import "./ImageTo3D.scss"; // Uncomment these to try out other 3D examples @@ -53,9 +55,10 @@ export default function ImageTo3DOutput(props) {

{task.outputText}

-

- Hover over the model and scroll to zoom, click-and-hold to rotate, right-click-and-hold to drag -

+
+ guide for viewing the 3d model +
+
{/* Very basic 3D Box that can be rotated with OrbitControls */} diff --git a/src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3D.scss b/src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3D.scss index 82081b4d..5b3d2dd3 100644 --- a/src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3D.scss +++ b/src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3D.scss @@ -53,17 +53,19 @@ &-subtitle { @include body; border-bottom: 1px solid $smokeDarkest; - margin-bottom: 12px; padding-bottom: 16px; @include mobileWidth-lg { @include bodySmall; } } - &-help-text { - @include bodySmall; - font-size: 14px; - margin-bottom: 12px; + &-model-controls { + display: flex; + justify-content: center; + + img { + max-width: 300px; + } } &-model { border: 1px solid $smokeDarkest; diff --git a/src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3DOutput.js b/src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3DOutput.js index 0fa80c63..03064bd8 100644 --- a/src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3DOutput.js +++ b/src/components/Experiment/QuickOutput/Outputs/TextTo3D/TextTo3DOutput.js @@ -13,6 +13,8 @@ import OBJComponent from "../ImageTo3D/OBJComponent"; import TextOutputInputSection from "../Text/TextOutputInputSection"; import useTextOutput from "../Text/useTextOutput"; +import directions from "../../../../../resources/img/3d-model-guide.png"; + import "./TextTo3D.scss"; export default function TextTo3DOutput(props) { @@ -56,9 +58,9 @@ export default function TextTo3DOutput(props) {

{task.outputText}

-

- Hover over the model and scroll to zoom, click-and-hold to rotate, right-click-and-hold to drag -

+
+ guide for viewing the 3d model +
{/* Just using the lighting from the BoxExample */} diff --git a/src/helpers/UppyFileTypeCheckerPlugin.js b/src/helpers/UppyFileTypeCheckerPlugin.js index b696ff97..8b4e8ddc 100644 --- a/src/helpers/UppyFileTypeCheckerPlugin.js +++ b/src/helpers/UppyFileTypeCheckerPlugin.js @@ -53,7 +53,7 @@ export const getAllowedFileTypes = (task) => { // Some file types are unfortunately not supported by the file checker return { fileTypes: ['*'], - mimeTypes: '*/*' + mimeTypes: ['*/*'] }; } }; @@ -73,6 +73,10 @@ export default class UppyFileTypeCheckerPlugin extends BasePlugin { } confirmFileType = async (fileIDs) => { + if (Array.isArray(this.allowedFileTypes) && this.allowedFileTypes[0] === '*') { + return Promise.resolve(); + } + // Note: This will break if we ever allow multiple uploads const file = this.uppy.getFile(fileIDs[0]); const blob = new Blob([file.data]); diff --git a/src/helpers/sampleImages.js b/src/helpers/sampleImages.js index e7c81be5..224c431d 100644 --- a/src/helpers/sampleImages.js +++ b/src/helpers/sampleImages.js @@ -229,7 +229,7 @@ export const SampleImageToTextInputs = [ ]; export const SampleTextTo3DInputs = [ - "a cool drum set" + { src: "a cool drum set" } ]; export const SampleTextClassificationInputs = [ diff --git a/src/resources/img/3d-model-guide.png b/src/resources/img/3d-model-guide.png new file mode 100644 index 00000000..2f0d0e15 Binary files /dev/null and b/src/resources/img/3d-model-guide.png differ