SHARE
TWEET

Untitled

a guest Aug 25th, 2019 60 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import './App.css';
  3. import Form from 'react-bootstrap/Form';
  4. import Col from 'react-bootstrap/Col';
  5. import Container from 'react-bootstrap/Container';
  6. import Row from 'react-bootstrap/Row';
  7. import Button from 'react-bootstrap/Button';
  8. import 'bootstrap/dist/css/bootstrap.css';
  9.  
  10. class App extends Component {
  11.  
  12.     constructor(props) {
  13.         super(props);
  14.  
  15.         this.state = {
  16.             isLoading: false,
  17.             formData: {
  18.                 sepalLength: 4,
  19.                 sepalWidth: 2,
  20.                 petalLength: 1,
  21.                 petalWidth: 0
  22.             },
  23.             result: ""
  24.         };
  25.     }
  26.  
  27.     handleChange = (event) => {
  28.         const value = event.target.value;
  29.         const name = event.target.name;
  30.         var formData = this.state.formData;
  31.         formData[name] = value;
  32.         this.setState({
  33.             formData
  34.         });
  35.     }
  36.  
  37.     handlePredictClick = (event) => {
  38.         const formData = this.state.formData;
  39.         this.setState({ isLoading: true });
  40.         fetch('http://127.0.0.1:5000/prediction/',
  41.          {
  42.              headers: {
  43.                  'Accept': 'application/json',
  44.                  'Content-Type': 'application/json'
  45.              },
  46.              method: 'POST',
  47.              body: JSON.stringify(formData)
  48.          })
  49.          .then(response => response.json())
  50.          .then(response => {
  51.              this.setState({
  52.                  result: response.result,
  53.                  isLoading: false
  54.              });
  55.          });
  56.  
  57.     }
  58.  
  59.     hancleCancelClick = (event) => {
  60.         this.setState({ result: ""});
  61.     }
  62.  
  63.     render() {
  64.         const isLoading = this.state.isLoading;
  65.         const formData = this.state.formData;
  66.         const result = this.state.result;
  67.  
  68.         var sepalLengths = []
  69.         for (var i = 4; i <= 7; i = +(i + 0.1).toFixed(1)) {
  70.             sepalLengths.push(<option key = {i} value = {i}>{i}</option>);
  71.         }
  72.         var sepalWidths = []
  73.         for (var i = 2; i <= 4; i = +(i + 0.1).toFixed(1)) {
  74.             sepalWidths.push(<option key = {i} value = {i}>{i}</option>);
  75.         }
  76.         var petalLengths = []
  77.         for (var i = 1; i <= 6; i = +(i + 0.1).toFixed(1)){
  78.             petalLengths.push(<option key = {i} value = {i}>{i}</option>);
  79.         }
  80.         var petalWidths = []
  81.         for (var i = 0.1; i <= 3; i = +(i + 0.1).toFixed(1)) {
  82.             petalWidths.push(<option key = {i} value = {i}>{i}</option>);
  83.         }
  84.  
  85.         return (
  86.             <Container>
  87.                 <div>
  88.                     <h1 className="title">Iris Plant Classifier</h1>
  89.                 </div>
  90.                 <div className="content">
  91.                     <Form>
  92.                         <Form.Row>
  93.                             <Form.Group as={Col}>
  94.                                 <Form.Label>Sepal Length</Form.Label>
  95.                                 <Form.Control
  96.                                     as="select"
  97.                                     name="sepalLength"
  98.                                     value={formData.sepalLength}
  99.                                     onChange={this.handleChange}>
  100.                                         {sepalLengths}
  101.                                     </Form.Control>
  102.                             </Form.Group>
  103.                             <Form.Group as={Col}>
  104.                                 <Form.Label>Sepal Width</Form.Label>
  105.                                 <Form.Control
  106.                                     as="select"
  107.                                     name="sepalWidth"
  108.                                     value={formData.sepalWidth}
  109.                                     onChange={this.handleChange}>
  110.                                         {sepalWidths}
  111.                                     </Form.Control>
  112.                             </Form.Group>
  113.                         </Form.Row>
  114.                         <Form.Row>
  115.                             <Form.Group as={Col}>
  116.                                 <Form.Label>Petal Length</Form.Label>
  117.                                 <Form.Control
  118.                                     as="select"
  119.                                     value={formData.petalLengths}
  120.                                     name="petalLength"
  121.                                     onChange={this.handleChange}>
  122.                                         {petalLengths}
  123.                                     </Form.Control>
  124.                             </Form.Group>
  125.                             <Form.Group as={Col}>
  126.                                 <Form.Label>Petal Width</Form.Label>
  127.                                 <Form.Control
  128.                                     as="select"
  129.                                     value={formData.petalWidths}
  130.                                     name="petalWidth"
  131.                                     onChange={this.handleChange}>
  132.                                         {petalWidths}
  133.                                 </Form.Control>
  134.                             </Form.Group>
  135.                         </Form.Row>
  136.                         <Row>
  137.                             <Col>
  138.                                 <Button
  139.                                     block
  140.                                     variant="success"
  141.                                     disabled={isLoading}
  142.                                     onClick={!isLoading ? this.handlePredictClick : null}>
  143.                                     { isLoading ? "Making prediction" : "Predict"}
  144.                                 </Button>
  145.                             </Col>
  146.                             <Col>
  147.                                 <Button
  148.                                     block
  149.                                     variant="danger"
  150.                                     disabled={isLoading}
  151.                                     onClick={this.hancleCancelClick}>
  152.                                     Reset prediction
  153.                                 </Button>
  154.                             </Col>
  155.                         </Row>
  156.                     </Form>
  157.                     {result === "" ? null :
  158.                         (<Row>
  159.                             <Col className="result-container">
  160.                                 <h5 id="result">{result}</h5>
  161.                             </Col>
  162.                         </Row>)
  163.                     }
  164.                 </div>
  165.             </Container>
  166.         );
  167.     }
  168. }
  169.  
  170. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top